vue项目中导出excel表格数据

一、需要安装三个依赖：

             npm install -S file-saver xlsx

             npm install -D script-loader

 

二、项目中新建文件夹（文件名excel）

里面放置两个文件Blob.js和 Export2Excel.js。

下载链接：https://pan.baidu.com/s/1fjSFq-XMLKFG2qVhhjSzGA 

提取码：bo09 
复制这段内容后打开百度网盘手机App，操作更方便哦

 

三、在vue的methods方法中：

页面添加导出按钮，加入方法

 

 //导出书刊列表数据
            exportData(){
                this._getBookExport()
            },
            _getBookExport(){
                let exportBook = {
                    libraryId:this.libraryId,
                    isbnOrIssn:this.isbnOrIssn,
                    category:this.category,
                    bookSn:this.bookSn,
                    status:this.status,
                }
                getBookExport(exportBook).then(res=>{
                    if(res.data.errcode === 0){
                        this.exportList = res.data.data
                        this.export2Excel()
                    } else if (res.data.errcode === 40190){
                        this.$Message.info(\'数据太多无法导出，请联系客服！\')
                    }
                })
            },
            export2Excel() {
    　　　　　　require.ensure([], () => {
    　　　　　　　　const { export_json_to_excel } = require(\'../../excel/Export2Excel\');
    　　　　　　　　const tHeader = [\'书刊编号\', \'书刊名称\', \'ISBN/ISSN\', \'索取号\', \'定价\',\'类别\'];
    　　　　　　　　const filterVal = [\'bookSn\', \'title\', \'isbnOrIssn\', \'callNumber\', \'price\',\'category\'];
    　　　　　　　　const list = this.exportList;
    　　　　　　　　const data = this.formatJson(filterVal, list);
    　　　　　　　　export_json_to_excel(tHeader, data, \'书刊数据\');
    　　　　　　})
    　　　　},
    　　　　formatJson(filterVal, jsonData) {
    　　　　　　return jsonData.map(v => filterVal.map(j => v[j]))
    　　　　}

 

四、假如项目有很多个导出，每个都写就太麻烦了

可以提取到一个js文件中

export function export2Excel(columns,list){
    require.ensure([], () => {
        const { export_json_to_excel } = require(\'../../excel/Export2Excel\');
        let tHeader = []
        let filterVal = []
        columns.forEach(item =>{
            tHeader.push(item.title)
            filterVal.push(item.key)
        })
        const data = list.map(v => filterVal.map(j => v[j]))
        export_json_to_excel(tHeader, data, \'数据列表\');
    })
}

　在需要的页面import引入

import { export2Excel } from \'@/common/js/util\'

 

 exportData(){
        let info = {from: 0,size: 300} 
        getDonateList(info).then(res =>{
            if(res.data.errcode === 0){
                this.exportList = this.formatList(res.data.data.records)
                export2Excel(this.columns1,this.exportList)
            } else if (res.data.errcode === 40190){
                this.$Message.info(\'数据太多无法导出，请联系客服！\')
            }
        })
    }