最近開發(fā)頁(yè)面用到了導(dǎo)出功能，之前也沒有做導(dǎo)出為excel功能的經(jīng)驗(yàn)，經(jīng)過各方面查詢嘗試之后，終于成功實(shí)現(xiàn)，所以來總結(jié)一下

1. 首先，你需要下載xlsx.js插件，并在HTML頭部文件中需要引入,我是直接用命令行下載的：npm install xlsx --save

2. 前端寫一個(gè)按鈕綁定函數(shù)：

<button @click="generateReport(0)">導(dǎo)出</button>

3. js部分實(shí)現(xiàn)函數(shù)，因?yàn)槲业臄?shù)據(jù)是通過ajax從后端獲取的，沒有后端數(shù)據(jù)就自己編造一個(gè)，代替我代碼中的this.ExcelData，或者不需要this.ExcelData，直接把return里面的內(nèi)容改成你需要的，比如：你想要的表格列名1:你想要的數(shù)據(jù)1,

你想要的表格列名2:你想要的數(shù)據(jù)2 這樣

//報(bào)表導(dǎo)出
        generateReport:function(no){
            $.ajax({
                url: '/generateReport',
                type: 'POST',
                context: this,
                data: {
                    'FLAG':no
                }
            }).done(function (data){
                console.log('opqrst',data);
                this.ExcelData = _.cloneDeep(data);
                let arr=this.ExcelData.map(item=>{
                    return {
                        陣列名稱:item.SUBARRY_NAME,
                        通訊箱名稱:item.COMMUNICATION_BOX_NAME,
                        通訊箱狀態(tài):item.COMMUNICATION_BOX_STATE,
                        跟蹤器名稱:item.TRACKER_NAME,
                        跟蹤器狀態(tài):item.TRACKER_STATE,
                        跟蹤模式:item.TRACKING_MODEL,
                        目標(biāo)角度:item.TARGET_ANGLE,
                        實(shí)際角度:item.MEASURED_ANGLE,
                    };
                });
                console.log('version',XLSX.version);
                let sheet=XLSX.utils.json_to_sheet(arr),
                    book=XLSX.utils.book_new();
                // sheet1表示要導(dǎo)出的分區(qū)名字
                XLSX.utils.book_append_sheet(book,sheet,"sheet1");
                console.log("book",book)
                // user開頭加時(shí)間戳的文件名，可以修改成其它名字
                XLSX.writeFile(book,`設(shè)備列表${(new Date()).getTime()}.xls`);
            })
        },

4. 成功后測(cè)試導(dǎo)出：

打開瀏覽器的下載內(nèi)容就可以查看表格：

打開xls文件，可以看到excel文件導(dǎo)出下載成功了：

提示：開發(fā)過程中遇到了一個(gè)報(bào)錯(cuò)：

XLSX.utils.json_to_sheet is not a function ,據(jù)說可能是因?yàn)?xlsx 版本問題導(dǎo)致的，所以在在調(diào)用 XLSX.utils.json_to_sheet() 方法前我控制臺(tái)輸出了自己的xlsx的版本號(hào)

console.log(XLSX.version)

百度說 0.8.8 以下版本不支持 json_to_sheet() 方法，但是我是0.8.11，不知道為啥也不支持，所以我又把原來的插件刪掉了，重新下載最新版：npm install xlsx@0.14.5 --save，就ok了文章來源地址http://www.zghlxwxcb.cn/news/detail-459292.html