今天做項目,有一個頁面是從後臺請求數據,如果想下載,那麼就手動點擊下載數據,可是如果兩次都從服務器請求數據,有點浪費服務器資源,所以乾脆就直接把數據保存在本地瀏覽器,然後點擊後保存到本地(前面是普通文件,如果想看excel請直接跳到後面)。
那麼問題來了:怎麼保存?
先貼代碼:
function downLoadDataToLoc() {
var saveDatas = getDataFromLocal("results");
// 上面是拿到我自己的數據,數據的格式是Json字符串
var blob = new Blob([JSON.stringify(saveDatas)], {type: 'application/json'})
// 創建一個blob的對象,把Json轉化爲字符串作爲我們的值
if("msSaveOrOpenBlob" in navigator){
// 這個判斷要不要都行,如果是IE瀏覽器,使用的是這個,
window.navigator.msSaveOrOpenBlob(blob, "results.txt");
} else { // 不是IE瀏覽器使用的下面的
var url = window.URL.createObjectURL(blob)
// 上面這個是創建一個blob的對象連鏈接,
var link = document.createElement('a')
// 創建一個鏈接元素,是屬於 a 標籤的鏈接元素,所以括號裏纔是a,
link.href = url;
// 把上面獲得的blob的對象鏈接賦值給新創建的這個 a 鏈接
link.setAttribute('download', "results.txt")
// 設置下載的屬性(所以使用的是download),這個是a 標籤的一個屬性
// 後面的是文件名字,可以更改
link.click();
// 使用js點擊這個鏈接
}
}
代碼效果如下圖:
希望這篇文章幫助到了大家!!!!
改不完的需求,需求要求保存爲excel格式,想學習怎麼保存excel文件格式的同學,請看這裏:
首先說明我的Json格式(如果Json格式不一樣,大家可以根據我的代碼自己改,很簡單的,我會詳細介紹這個代碼):
// 下面是我的Json的數據格式,注意,如果格式不同,請修改我的代碼
// 可以是一個這樣的字符串,但是需要大家手動格式化,使用這個函數
// json = JSON.parse(json); 但是格式化之後一定要和我的格式一樣
var json ={
"--普通人--0--朱少強的大號--2019-10-20 09:29:14--Chuckie": ["72447305"],
"--普通人--0--朱少強的大號 的第二條--2019-10-20 11:08:37--Chuckie": ["72447305"],
"--學生--5--QQ號,新增的--2019-10-22 14:32:57 .09683--Chuckie": ["72447305"],
"--好人--5--QQ號,新增的--2019-10-22 14:32:57.09683--Chuckie": ["72447305"],
"--週二測試--0--2019年10月22測試--2019-10-22 15:38:46.37403--Chuckie":[
"72447305",
"267525217",
"123321",
"123456",
"12345"
],
"--普通人--0--朱少強小號--2019-10-20 11:08:55--Chuckie": ["267525217"],
}
下面是轉換的代碼(直接複製保存到html中,瀏覽器打開就能用,親測可用):
<!DOCTYPE html>
<html>
<head>
<title>正則表達式</title>
<script type="text/javascript" src="../JQUERY/jqmini.js"></script>
<script type="text/javascript" src="../JQUERY/jquerymousewheelmini.js"></script>
<!-- 上面那個是用來鼠標滾輪事件的 -->
<script type="text/javascript">
function JSONToExcelConvertor(fileName, jsonData) {
var json = jsonData;
var excel = '<table>';
// style中的內容:mso-number-format:General:設置單元格格式爲文本,這樣可以保證我們的數據一定是原樣
for (var name in json) {
// 每次循環把每對兒鍵值的內容放在同一行上
excel += "<tr><td style='color:red;text-align:center;mso-number-format:General;'>" + name + '</td>';
for (var i in json[name]){ // 這個i是數據的下標
accountNumber = json[name][i] // 拿到號碼
excel += "<td style='text-align:center;mso-number-format:General;'>" + accountNumber + '</td>';
// 每個號碼放置到一個單元格,
}
excel += "</tr>"; // 一行結束
}
//table結束
excel += "</table>";
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
excelFile += '; charset=UTF-8">';
excelFile += "<head>";
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += "{worksheet}";
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
excelFile += "</head>";
excelFile += "<body>";
excelFile += excel; //將table 拼接
excelFile += "</body>";
excelFile += "</html>";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
// 給我們上面格式出來的內容設置一個URI(統一資源標誌符)
var link = document.createElement("a"); //創建a標籤
link.href = uri; // 把上文解析出來的鏈接賦值給上面創建的a標籤
link.style = "visibility:hidden"; //設置爲不可見,當然設置也可以,看個人喜好
link.download = fileName + ".xls";//指定文件名和文件後綴格式
// 不可以改爲 xlsx格式,因爲我們這個格式化是按照格式寫出來的,而真正的excel文件格式很麻煩
// 如果打不開,查看這個文件屬性是否被鎖定了,解除鎖定即可。
document.body.appendChild(link); //追加a標籤到html內部
// 當然不放也能點擊,但是爲了保險起見,還是放一下
link.click(); // 點擊我們剛剛創建的a標籤
document.body.removeChild(link); // 把剛剛創建的a標籤刪除了
}
$(function(){
var json ={
"--普通人--0--的大號--2019-10-20 09:29:14--Chuckie": ["72447305"],
"--普通人--0--的大號 的第二條--2019-10-20 11:08:37--Chuckie": ["72447305"],
"--學生--5--QQ號,新增的--2019-10-22 14:32:57 .09683--Chuckie": ["72447305"],
"--好人--5--QQ號,新增的--2019-10-22 14:32:57.09683--Chuckie": ["72447305"],
"--週二測試--0--2019年10月22測試--2019-10-22 15:38:46.37403--Chuckie": ["72447305",
"267525217", "123321", "123456", "12345"
],
"--普通人--0--小號--2019-10-20 11:08:55--Chuckie": ["267525217"]
}
// 如果大家的是字符串,就把下面兩行解除註釋,然後取控制檯對比數據格式是否一致
// json = JSON.parse(json);
// console.log(json)
JSONToExcelConvertor("json1",json);
})
</script>
</head>
<body>
</body>
</html>
下面這是結果的截圖: