记录前端vue导出Excel

2019-04-22

Excel的导出一般都在后端,但是遇到在前端导出的场景,因此记录一下在vue中如何导出Excel。

需要安装的库

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

准备工作

下载Blob.jsExport2Excel.js,关于如何下载,自己解决吧。

下载之后,在src或者你自己存放资源文件的目录下存放这两个js文件。当然,自己一定要记着存放这两个文件的文件目录位置。

接下来我们来配置一下我们的文件夹alias以方便我们在项目中使用。

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'vendor': path.resolve(__dirname, '../src/之前存放文件的路径')
}

准备工作做好了,接下来我们来看一下在代码中如何使用。

在代码中如何使用

这里我们可以使用webpack的require.ensure异步代码分割,加载Export2Excel.js文件。

handleDownload() {
   require.ensure([], () => {
        const { export_json_to_excel } = require("vendor/Export2Excel");
        const tHeader = ["编号","姓名"]
        const filterVal= ["id","name"]
        const list = [{id:1,name:"常常"},{id:2,name:"常常2"}]
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "表名");
   });
},
// 参数过滤formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
}

然后就OK了。