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('数据太多无法导出，请联系客服！')
            }
        })
    }