JS保存數據到本地文件(普通文件和excel文件)——普通文件使用blob實現(excel自己寫格式)——代碼詳解

今天做項目,有一個頁面是從後臺請求數據,如果想下載,那麼就手動點擊下載數據,可是如果兩次都從服務器請求數據,有點浪費服務器資源,所以乾脆就直接把數據保存在本地瀏覽器,然後點擊後保存到本地(前面是普通文件,如果想看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>

下面這是結果的截圖:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章