Vue 纯前端导出Excel

实际开发，遇到要求只在前端进行导出Excel文件的需求，而非调用接口形式。

1.使用npm下载插件

npm 命令行如下：

npm install xlsx file-saver -S

npm install script-loader -S -D

也可以使用 cnpm :

cnpm install xlsx file-saver -S

cnpm install script-loader -S -D

2.在 -src文件夹下创建增加两个文件：

如图：

文件位置

文件资源路径：

链接:https://pan.baidu.com/s/1faCXdvqoiyagGWID3_e_PA

密码:bau3

下载记得点赞，口享！

3. 封装、使用

按钮使用：

 <el-tooltip class="item" effect="dark" content="导出" placement="bottom">
   <el-button type="primary" circle icon="el-icon-download" @click="exportExcelData" />
  </el-tooltip>

// click事件
exportExcelData () {
     // 省略的逻辑代码 ......
      exportExcel(columnTitle, columnData, "我的导出文件名"); //调用封装好的方法
}

这里要说注意下，这个导出数据我的是一个二维数组，需要做一个处理

封装成公共的方法：

// 导出Excel
export function exportExcel(columns,list,excelName){
  require.ensure([], () => {
      const { export_json_to_excel } = require('../vender/Export2Excel');//注意引入资源路径问题（我这里是相对路径）
      let tHeader = []
      let filterVal = []
      columns.forEach(item =>{
          tHeader.push(item.title)
          filterVal.push(item.key)
      })
      let data = []
      list.forEach(v => {
        v.forEach((item, j) =>{
          let a = data[j] = data[j] || []
          a.push(item)
        })
      })
      export_json_to_excel(tHeader, data, excelName);
  })
}

4. 导出结果

如图：

导出的excel