【js-xlsx和file-saver插件】前端導出數據到excel

　　最近在做項目，前端進行處理數據，導出excel中，還是遇到不少問題，這里將其進行總結一下，博主是vue框架開發，借用file-saver和xlsx插件進行導出excel,我們來看下代碼和效果。地址鏈接如下：https://www.npmjs.com/package/js-xlsx

　　博主自己封裝了一個方法xlsx.js，然后在vue中進行調用就行，如下：

import fs from 'file-saver'
import XLSX from 'xlsx'
export default (json, fields, filename = '測試數據.xlsx') => {

    json.forEach(item => {
        for (let i in item) {
            if (fields.hasOwnProperty(i)) {
                item[fields[i]] = item[i];
            }
            delete item[i]; //刪除原先的對象屬性
        }
    })

    let sheetName = filename //excel的文件名稱
    let wb = XLSX.utils.book_new()  //工作簿對象包含一SheetNames數組，以及一個表對象映射表名稱到表對象。XLSX.utils.book_new實用函數創建一個新的工作簿對象。
    let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //將JS對象數組轉換為工作表。
    wb.SheetNames.push(sheetName)
    wb.Sheets[sheetName] = ws
    const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//設置表格的樣式
    let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false }  //寫入的樣式
    let wbout = XLSX.write(wb, wopts)
    let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    fs.saveAs(blob, filename + '.xlsx')
}

const s2ab = s => {
    if (typeof ArrayBuffer !== 'undefined') {
        var buf = new ArrayBuffer(s.length)
        var view = new Uint8Array(buf)
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
        return buf
    } else {
        var buf = new Array(s.length);
        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
}

 調用當時如下，現在vue種引入該js文件，如下：

import xlsx from "../../utils/xlsx.js";

然后我們開始調用該方法，如下：

　　　　　/**
         * 導出到excel
         **/
        exportToExcel() {
            let fields = {
                test1:"測試1",
                test2:"測試2"
            };
            this.getHeadMapList.forEach(item => {
                fields['_' +item.key] = item.value; //動態生成的頭
            });
            fields.totalCommission = "獎勵總數"
            //此處有vue大坑，不能直接使用xlsx(this.getComputedData),必須先轉一下
            let data = JSON.parse(JSON.stringify(this.getComputedData));
　　　　　　　xlsx(data, fields, "獎勵匯總列表"); },

　　此處有兩處大坑，一個是data不能直接使用this.getBuildData ，而要將其轉換一下，原因是this.getBuildData是計算

出來的，vue里面會自動更改它的值，這個bug找了好久才搞定，心塞。

 getComputedData() {
            let itemData = { };
            let arr = []
            this.dataList.map(item => {
                this.formDataFitTable(
                    item.mapPrdTypeCommission,
                    this.getHeadMapList
                ).map(v => {
                    itemData['_' + v.key] = v.value;
                });
                itemData.sid = item.sid;
                itemData.yearMonth = item.yearMonth;
                itemData.totalCommission = item.totalCommission;
                arr.push(itemData);
                itemData = { }; //注意要將其清空，然后再重新遍歷
            });
            return arr;
        }

　　第二個問題是，插入頭部的時候，會存在順序問題，比如業務要求，我就要將測試1放在excel的第一列里面，而實際上，

　　對象是無序的，如果對象中單純只包含數字類型的屬性，或者字母類型的屬性，是沒有問題，而如果對象種既包含數字和字母

的屬性，那么對象就會優先將數字排在最前面。先看下導出結果如下：

　　原本我是想將one這一列，放在第一列的位置上，然而結果卻是排在最后面，當然因為我的數據格式里面就是既有數字類型，

又有字母類型的，看下數據格式：

{
  "test1":"測試1",
  "test2":"測試2",
   1:“測試3”,
   2:"測試4" ,
   3:“測試5”,
   4:"測試6" , 
   5:“測試7”,
   6:"測試8" ,
   7:“測試9”,
   8:"測試10" , 
   9:“測試11”,
   10:"測試12" , 
   11:“測試13”,
   12:"測試14" , 
   13:“測試15”,
   14:"測試16" ,         
}

那么導出的結果就會是如下所示：

那么如何解決呢，其實只要將數字變為字符類型的就行了，上面代碼也可以看出，加一個_就行了。

 2：拼接數據數組，如何導出呢？

　　首先先看下效果，如下所示：這里數據雖然都打上了碼，不過應該能明白博主的意思，顯然這不是我們要的效果

那么我們怎么解決呢？博主這里想到了一個比較笨的方法，歡迎大家指教，就是將其key值變為跟前面幾列的相同，如下數據格式：

exportToExcel() {
            let field = {
                test1: "測試1",
                test2: "測試2",
                test3: "測試3",
                test4: "測試4"
            };
            let r = this.requestData({
                pageIndex: null,
                pageSize: null,
                isNotPaging: true
            });
            this.dispatchDataList(r).then(data => {
                if (data) {
                    let data1= data.data1;
                    let data2 = data.data2;
                    let arry = [
                        {
                            test1:"",
                            test2:"",
                            test3:"",
                            test4:""
                        },
                        {
                            test1:"總狀態",
                            test2:"總次數",
                            test3:"總數量",
                            test4:"總獎勵"
                        }
                    ];
                    if(data2){
                        data2.forEach(item=>{
                            arry.push({
                                test1:item.type,
                                test2:item.rewardCount,
                                test3:item.totalQuality,
                                test3:item.totalCommission
                            })
                        })
                         xlsx( data1.concat(arry), field,"測試數據工作簿" );  
                    }else{
                         this.showTips("warning", "無數據，請重新查詢！")
                    } 
                }
            });
        },

　　方法比較笨，但是效果是沒問題的，有好的方法，歡迎大家指正。其實就是相當於，將其變為某一行數據格式

插入到第一個數組里面，進行遍歷第一個插入空的，是希望能夠跟第一個數組隔開，轉換之后效果如下：

好啦，前端導入excel差不多就這么多，有好的方法歡迎大家給我留言！

---

 作者：婷風

 出處：http://www.cnblogs.com/jtjds/p/8892510.html 

 如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！歡迎各位轉載，但是未經作者本人同意 

轉載文章之后必須在 文章頁面明顯位置給出作者和原文連接否則保留追究法律責任的權利。