码迷,mamicode.com
首页 > 其他好文 > 详细

将页面中表格数据导出excel格式的文件(vue)

时间:2018-03-30 16:29:21      阅读:419      评论:0      收藏:0      [点我收藏+]

标签:method   tree   方法   file   错误   pat   状态   vendor   lan   

  近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了。

  1、安装相关依赖(npm安装可能会出现某些错误,可以使用cnpm):

npm install file-saver --save   // 保存文件用
npm install xlsx --save    // 转二进制用
npm install script-loader --save-dev    // xlsx核心文件

  

  2、下载两个核心js文件,Blob.js和 Export2Excel.js  下载地址:Blob.js和 Export2Excel.js文件

  

  3、在src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js放进去。

  4、更改webpack.base.conf.js配置。

  在resolve的alias里添加如下代码:

‘vendor‘: path.resolve(__dirname, ‘../src/vendor‘)

  5、在需要导出excel格式文件的页面中写入以下两个方法,如:

methods: {
    formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
  },
    export2Excel() {
      const _this = this
   require.ensure([], () => {
     const { export_json_to_excel } = require(‘../vendor/Export2Excel‘);
     const tHeader = [‘ID‘, ‘封面‘, ‘小说名‘,‘二级分类‘,‘作者‘,‘进度‘,‘更新时间‘, ‘状态‘];
     const filterVal = [‘novelId‘, ‘imageUrl‘, ‘title‘, ‘categoryName‘, ‘author‘, ‘completeStatus‘, ‘updateTime‘, ‘status‘];
     const list = _this.dataList;
     const data = _this.formatJson(filterVal, list);
     export_json_to_excel(tHeader, data, ‘小说列表‘);
   })
    }
  }

  注意:tHeader表示表头的标题,filterVal表示表头的字段名,可通过点击事件调用导出方法。

<button type="primary" @click="export2Excel">导出</button>

  

将页面中表格数据导出excel格式的文件(vue)

标签:method   tree   方法   file   错误   pat   状态   vendor   lan   

原文地址:https://www.cnblogs.com/jf-67/p/8676329.html

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