码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-03-25 10:32:05      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:ade   组件   port   https   姓名   依赖   前端   har   dex   

1安装三个依赖包

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

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.如果报错,可能路径问题

技术图片

 

 

 

  

 

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

标签:ade   组件   port   https   姓名   依赖   前端   har   dex   

原文地址:https://www.cnblogs.com/lizhao123/p/12564234.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!