【项目】vue导出excel文件

1,176 阅读1分钟

准备操作:安装依赖

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

创建文件夹

在目录下(一般为src目录)创建一个文件夹(一般取名为vendor)放入以下文件Blob.js和Export2Excel.js 附下载地址:链接:pan.baidu.com/s/1K7-lfBfn… 提取码:cn07

配置Export2Excel.js文件

require('script-loader!file-saver');
require('./Blob');//配置地址根据实际配置
require('script-loader!xlsx/dist/xlsx.core.min');

定义方法

在需要使用的组件中定义方法

export2Excel() {
     require.ensure([], () => {
     const { export_json_to_excel } = require('../vendor/Export2Excel');
     const tHeader = ['序号', '姓名', '性别',];//生成Excel表格的头部标题栏
     const filterVal = ['id', 'xp', 'yp','xy'];//生成Excel表格的内容栏(根据自己的数据内容属性填写)
     const list = this.forlist;//需要导出Excel的数据
     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]))
   }
  },

应用

给按钮添加点击事件

<button @click="export2Excel">导出Excel</button>