Vue - table导出excel文件

GitHub Demo 地址

在线预览

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

使用Export2Excel.js导出excel

1、安装依赖:

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

2、下载导入Blob.js和 Export2Excel.js

Blob.js
Export2Excel.js
在这里插入图片描述
3、 使用

   // 导出数据
   exportToExcel() {
    
    
     if (this.selectionList.length === 0) {
    
    
       this.$message.warning('请选择记录');
       return;
     } else {
    
    
       this.handelExcel()
     }
   },
   handelExcel() {
    
    
     require.ensure([], () => {
    
    
       const {
    
     export_json_to_excel } = require('.././vendor/Export2Excel.js')//注意这个Export2Excel路径
       const tHeader = ['序号', '登录账号', '姓名', '时间'] // 上面设置Excel的表格第一行的标题
       const filterVal = ['id', 'loginAccount', 'name', 'updateTime'] // tableData里对象的属性key值
       const list = this.selectionList //把要导出的数据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]))
   },

猜你喜欢

转载自blog.csdn.net/iotjin/article/details/119610490
今日推荐