天天看點
傳回

js-xlsx導出自定義合并列頭實作思路1.通過導入擷取列頭JSON資料2.嘗試導出列頭3.導出資料與自定義列頭

js-xlsx導出自定義合并列頭實作思路1.通過導入擷取列頭JSON資料2.嘗試導出列頭3.導出資料與自定義列頭
前兩天有幾個小夥伴找我問我關于js-xlsx導出時列頭合并單元格的問題,因為小夥伴需要導出的效果都不太一樣,是以我在這裡對其解決思路簡單的給講一下,大家根據實際情況自行修改。

1.通過導入擷取列頭JSON資料

其實合并單元格我早在文章《

純前端利用 js-xlsx 之合并單元格(3)

》中有講到過可能當時将的比較簡單是以這次我們講下比較複雜的情況.。

首先我先建立一個xlsx檔案裡面隻存放我的列頭資料比如:

js-xlsx導出自定義合并列頭實作思路1.通過導入擷取列頭JSON資料2.嘗試導出列頭3.導出資料與自定義列頭

導入示例代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="xlsx.core.min.js"></script>
</head>
<body>
    <input type="file" onchange="importf(this)" />
    <div id="demo"></div>
    <script>
        var WB;
        var rABS = true; //是否将檔案讀取為二進制字元串
        function importf(obj) {//導入
            if (!obj.files) { return; }
            var f = obj.files[0];
            {
                var reader = new FileReader();
                var name = f.name;
                reader.onload = function (e) {
                    var data = e.target.result;
                    WB = XLSX.read(data, { type: 'binary' });
                    document.getElementById("demo").innerHTML = JSON.stringify(WB.Sheets[WB.SheetNames[0]]);
                };
                if (rABS) reader.readAsBinaryString(f);
                else reader.readAsArrayBuffer(f);
            }
        }
    </script>
</body>
</html>

可以看到導出結果:

js-xlsx導出自定義合并列頭實作思路1.通過導入擷取列頭JSON資料2.嘗試導出列頭3.導出資料與自定義列頭

整理後我們得到關鍵資料:

{ "A1": { "v": "日期" }, "B1": { "v": "配送資訊" }, "C1": { "v": "" }, "D1": { "v": "" }, "E1": { "v": "" }, "F1": { "v": "" }, "A2": { "v": "" }, "B2": { "v": "姓名" }, "C2": { "v": "位址" }, "D2": { "v": "" }, "E2": { "v": "" }, "F2": { "v": "" }, "A3": { "v": "" }, "B3": { "v": "" }, "C3": { "v": "省份" }, "D3": { "v": "市區" }, "E3": { "v": "位址" }, "F3": { "v": "郵編" }, "!merges": [{ "s": { "c": 1, "r": 0 }, "e": { "c": 5, "r": 0 } }, { "s": { "c": 2, "r": 1 }, "e": { "c": 5, "r": 1 } }, { "s": { "c": 0, "r": 0 }, "e": { "c": 0, "r": 2 } }, { "s": { "c": 1, "r": 1 }, "e": { "c": 1, "r": 2 } }] }

2.嘗試導出列頭

代碼中的

xlsx.utils.min.js

相關示例可檢視文章《

js-xlsx工具類庫 xlsxUtils 使用示例

》

代碼示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="xlsx.core.min.js"></script>
    <script src="xlsx.utils.min.js"></script>
    <script>
        function saveAs(obj, fileName) {//當然可以自定義簡單的下載下傳檔案實作方式 
            var tmpa = document.createElement("a");
            tmpa.download = fileName || "下載下傳";
            tmpa.href = URL.createObjectURL(obj); //綁定a标簽
            tmpa.click(); //模拟點選實作下載下傳
            setTimeout(function () { //延時釋放
                URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL
            }, 100);
        } 
    </script>
</head>

<body>
    <input type="button" onclick="downloadExl()" value="導出" />
    <div id="demo"></div>
    <script>
        var head = { "A1": { "v": "日期" }, "B1": { "v": "配送資訊" }, "C1": { "v": "" }, "D1": { "v": "" }, "E1": { "v": "" }, "F1": { "v": "" }, "A2": { "v": "" }, "B2": { "v": "姓名" }, "C2": { "v": "位址" }, "D2": { "v": "" }, "E2": { "v": "" }, "F2": { "v": "" }, "A3": { "v": "" }, "B3": { "v": "" }, "C3": { "v": "省份" }, "D3": { "v": "市區" }, "E3": { "v": "位址" }, "F3": { "v": "郵編" }, "!merges": [{ "s": { "c": 1, "r": 0 }, "e": { "c": 5, "r": 0 } }, { "s": { "c": 2, "r": 1 }, "e": { "c": 5, "r": 1 } }, { "s": { "c": 0, "r": 0 }, "e": { "c": 0, "r": 2 } }, { "s": { "c": 1, "r": 1 }, "e": { "c": 1, "r": 2 } }] };
        function downloadExl() {
            var wb = xlsxUtils.format2WB(head, undefined, undefined, "A1:F3");
            saveAs(xlsxUtils.format2Blob(wb), "這裡是下載下傳的檔案名.xlsx");
        }
    </script>
</body>
</html>

成功導出的效果:

js-xlsx導出自定義合并列頭實作思路1.通過導入擷取列頭JSON資料2.嘗試導出列頭3.導出資料與自定義列頭

3.導出資料與自定義列頭

一般情況下我們導出的JSON資料是這樣的:

[{
    "riqi": "2016/5/1",
    "ming": "關愛單身狗",
    "sheng": "上海",
    "shi": "普陀區",
    "dizhi": "上海市普陀區金沙江路 1518 弄",
    "youbian": "200333"
}, {
    "riqi": "2016/5/2",
    "ming": "關愛單身狗",
    "sheng": "上海",
    "shi": "普陀區",
    "dizhi": "上海市普陀區金沙江路 1518 弄",
    "youbian": "200333"
}, {
    "riqi": "2016/5/3",
    "ming": "關愛單身狗",
    "sheng": "上海",
    "shi": "普陀區",
    "dizhi": "上海市普陀區金沙江路 1518 弄",
    "youbian": "200333"
}, {
    "riqi": "2016/5/4",
    "ming": "關愛單身狗",
    "sheng": "上海",
    "shi": "普陀區",
    "dizhi": "上海市普陀區金沙江路 1518 弄",
    "youbian": "200333"
}, {
    "riqi": "2016/5/5",
    "ming": "關愛單身狗",
    "sheng": "上海",
    "shi": "普陀區",
    "dizhi": "上海市普陀區金沙江路 1518 弄",
    "youbian": "200333"
}, {
    "riqi": "2016/5/6",
    "ming": "關愛單身狗",
    "sheng": "上海",
    "shi": "普陀區",
    "dizhi": "上海市普陀區金沙江路 1518 弄",
    "youbian": "200333"
}, {
    "riqi": "2016/5/7",
    "ming": "關愛單身狗",
    "sheng": "上海",
    "shi": "普陀區",
    "dizhi": "上海市普陀區金沙江路 1518 弄",
    "youbian": "200333"
}]

那好,隻要将資料和列頭的json資料進行整合導出就行了,不過注意一點就是因為列頭資料跟導出資料列可能無法根據英文字段對應,是以我們需要手動聲明順序數組去比對對應:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="xlsx.core.min.js"></script>
    <script src="xlsx.utils.min.js"></script>
    <script>
        function saveAs(obj, fileName) {//當然可以自定義簡單的下載下傳檔案實作方式 
            var tmpa = document.createElement("a");
            tmpa.download = fileName || "下載下傳";
            tmpa.href = URL.createObjectURL(obj); //綁定a标簽
            tmpa.click(); //模拟點選實作下載下傳
            setTimeout(function () { //延時釋放
                URL.revokeObjectURL(obj); //用URL.revokeObjectURL()來釋放這個object URL
            }, 100);
        } 
    </script>
    <script>
        var Data = [{ "riqi": "2016/5/1", "ming": "關愛單身狗", "sheng": "上海", "shi": "普陀區", "dizhi": "上海市普陀區金沙江路 1518 弄", "youbian": "200333" }, { "riqi": "2016/5/2", "ming": "關愛單身狗", "sheng": "上海", "shi": "普陀區", "dizhi": "上海市普陀區金沙江路 1518 弄", "youbian": "200333" }, { "riqi": "2016/5/3", "ming": "關愛單身狗", "sheng": "上海", "shi": "普陀區", "dizhi": "上海市普陀區金沙江路 1518 弄", "youbian": "200333" }, { "riqi": "2016/5/4", "ming": "關愛單身狗", "sheng": "上海", "shi": "普陀區", "dizhi": "上海市普陀區金沙江路 1518 弄", "youbian": "200333" }, { "riqi": "2016/5/5", "ming": "關愛單身狗", "sheng": "上海", "shi": "普陀區", "dizhi": "上海市普陀區金沙江路 1518 弄", "youbian": "200333" }, { "riqi": "2016/5/6", "ming": "關愛單身狗", "sheng": "上海", "shi": "普陀區", "dizhi": "上海市普陀區金沙江路 1518 弄", "youbian": "200333" }, { "riqi": "2016/5/7", "ming": "關愛單身狗", "sheng": "上海", "shi": "普陀區", "dizhi": "上海市普陀區金沙江路 1518 弄", "youbian": "200333" }];
    </script>
</head>

<body>
    <input type="button" onclick="downloadExl()" value="導出" /> 
    <script>
        var head = { "A1": { "v": "日期" }, "B1": { "v": "配送資訊" }, "C1": { "v": "" }, "D1": { "v": "" }, "E1": { "v": "" }, "F1": { "v": "" }, "A2": { "v": "" }, "B2": { "v": "姓名" }, "C2": { "v": "位址" }, "D2": { "v": "" }, "E2": { "v": "" }, "F2": { "v": "" }, "A3": { "v": "" }, "B3": { "v": "" }, "C3": { "v": "省份" }, "D3": { "v": "市區" }, "E3": { "v": "位址" }, "F3": { "v": "郵編" }, "!merges": [{ "s": { "c": 1, "r": 0 }, "e": { "c": 5, "r": 0 } }, { "s": { "c": 2, "r": 1 }, "e": { "c": 5, "r": 1 } }, { "s": { "c": 0, "r": 0 }, "e": { "c": 0, "r": 2 } }, { "s": { "c": 1, "r": 1 }, "e": { "c": 1, "r": 2 } }] };
        var keyMap = ["riqi", "ming", "sheng", "shi", "dizhi", "youbian"];//通過設定數組讓導出時可以按順序顯示
        var wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };
        function downloadExl() {
            var data = xlsxUtils.format2Sheet(Data, 0, 3, keyMap);//偏移3行按keyMap順序轉換
            var dataKeys = Object.keys(data);
            for (var k in head) data[k] = head[k];//追加列頭
            var wb = xlsxUtils.format2WB(data, undefined, undefined, "A1:" + dataKeys[dataKeys.length - 1]); 
            saveAs(xlsxUtils.format2Blob(wb), "這裡是下載下傳的檔案名.xlsx");
        } 
    </script>
</body>
</html>

最終導出效果:

js-xlsx導出自定義合并列頭實作思路1.通過導入擷取列頭JSON資料2.嘗試導出列頭3.導出資料與自定義列頭

線上檢視

大概思路就是這樣的,如果大家有跟好的辦法可以在文章下面評論區留言或交流。
Web App開發 json 資料格式 js-xlsx導出 js-xlsx檔案導入導出 前端js-xlsx導出 前端js-xlsx檔案導入導出 web app資料
上一篇: 制作簡單太陽追蹤器(電子向日葵)
下一篇: js-xlsx工具類庫 xlsxUtils 使用示例

繼續閱讀