vue导出excel

1.安装依赖

1 npm install file-saver -S 
2 npm install xlsx -S
3 npm install -D script-loader

2.导入两个JS文件

Blob.js和Export2Excel.js 在src目录下新建vendor文件夹,里面放入Blob.js和Export2Excel.js两个JS文件。目录大概是这样的:

vue导出excel_第1张图片

3.在main.js中引入两个包

import Blob from './vendor/Blob'
import Export2Excel from './vendor/Export2Excel.js'

4.修改Export2Excel.js

require('script-loader!../../../node_modules/file-saver/src/FileSaver');
require('script-loader!./Blob');
require('script-loader!../../../node_modules/xlsx/dist/xlsx.core.min');

5.在你要导出文件的这个vue页面中写2个方法

export2Excel(){
          require.ensure([], () => {
            const { export_json_to_excel } = require('./vendor/Export2Excel');
            //头
            const tHeader = [ '时间', '地址', '姓名'];
            //对应的标签
            const filterVal = ['date', 'address', 'name'];
            //标签对应的内容  是一个数组结构            
            const list = this.tableData;
            //一个方法 我也不知道干嘛的
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, '列表excel');
          })
        },
formatJson(filterVal, jsonData){
    return jsonData.map(v => filterVal.map(j => v[j]))
},

可参考

https://www.cnblogs.com/myfirstboke/p/8243800.html

https://www.jb51.net/article/129695.htm

https://www.jianshu.com/p/3f78590ba194

https://www.jb51.net/article/149084.htm

你可能感兴趣的:(vue导出excel)