vue基于Blob.js和 Export2Excel.js做前端导出

Posted 奔跑吧前端(李钊)

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue基于Blob.js和 Export2Excel.js做前端导出相关的知识,希望对你有一定的参考价值。

1安装三个依赖包

npm install -S file-saver@2.0.2
npm install -S xlsx@0.15.6
npm install -D script-loader@0.7.2

2导入两个js

下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件,下面有

 链接: https://pan.baidu.com/s/1kmpEq2If39HbHFrXdpQRPw 密码: 2694 (有这两个文件) 

3.main.js 引入文件

import Blob from \'./Excel/Blob\'
import Export2Excel from \'./Excel/Export2Excel.js\'

组件中使用

 

//导出的方法
exportExcel() {
  require.ensure([], () => {
    const { export_json_to_excel } = require(\'../Excel/Export2Excel\');//注意这个Export2Excel路径
    const tHeader = [\'序号\', \'昵称\', \'姓名\'];   // 上面设置Excel的表格第一行的标题
    const filterVal = [\'index\', \'nickName\', \'name\']; // 上面的index、nickName、name是tableData里对象的属性key值
    const list = this.tableData;  //把要导出的数据tableData存到list
    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]))
}

5.如果报错,可能路径问题

 

 报错信息TypeError: Cannot read property \'encode_cell\' of undefined 解决方案 Export2Excel.js中引入了XLSX

 

 

 

 

 

  

 

以上是关于vue基于Blob.js和 Export2Excel.js做前端导出的主要内容,如果未能解决你的问题,请参考以下文章

前端导出excel(三----基于Blob.js和 Export2Excel.js做前端导出)

Vue通过Blob对象实现导出Excel功能

vue项目中如何把表格导出excel表格

vue+iview中的table表格导出excel表格

vue导出excel表格用到的两个文件

markdown blob.js