vue导出下载excel

使用xlsx-style导出表格,下载为excel文件,并修改其样式

1,安装三个依赖包

npm install -S file-saver
npm install -S xlsx-style
 npm install -S xlsx
 npm install -D script-loader

2,在项目中创建一个文件夹（比如vendor，一般是在src目录下创建）
把Blob.js 和 Export2Excel.js 和 cpexcel.js 这三个文件夹放到新建的文件夹内.

注意: xlsx-style插件中,dist/cpexcel.js有问题,启动时会出错,所以需要用vendor/cpexcel.js替换下(这里使用build下新增modifyXlsx.js，在webpack.base.conf.js中执行，使用node来实现替换)

首先,把github上vendor目录下的内容复制到本地文件.
其次,修改配制如下

//modifyXlsx.js
//作用:复制vendor下的cpexcel.js到modules_node下xlsx-style/dist/cpexcel.js下
var fs = require('fs');
function copyIt(from, to) {
  console.log("-------写入cpexcel.js---------")
  fs.writeFileSync(to, fs.readFileSync(from));
}

module.exports = {
  copyIt
}


//webpack.base.conf.js
//add  复制文件到指定地方
const ModifyXlsx = require('./modifyXlsx.js');
let fromPath = path.resolve(__dirname,'../src/vendor/cpexcel.js'),
    toPath = path.resolve(__dirname,'../node_modules/xlsx-style/dist/cpexcel.js');
ModifyXlsx.copyIt(fromPath,toPath);

3,在页面中使用Export2Excel.js暴露了两个接口export_table_to_excel和export_json_to_excel,我们常用export_json_to_excel.

//点击导出后,执行如下方法
 handleDownload(){
  require.ensure([], () => {
    const { export_json_to_excel } = require('@/vendor/Export2Excel')    //引入
    const tHeader = ['姓名', '语文', '数学','英语']
    const filterVal = ['name', 'chinese', 'math','english']
    const list = this.tableData
    const data = this.formatJson(filterVal, list)
    export_json_to_excel(tHeader, data, '成绩单')            //传参调用
  })
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}

参考链接:https://www.cnblogs.com/qiu-Ann/p/7743897.html
demo地址: https://github.com/yiyueqinghui/exportExcel
xlsx-style文档: https://www.npmjs.com/package/xlsx-style