vue导出excel文件

准备操作:安装依赖

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

创建文件夹

在目录下(一般为src目录)创建一个文件夹(一般取名为vendor)放入以下文件Blob.js和Export2Excel.js
附下载地址:链接:https://pan.baidu.com/s/1K7-lfBfnB1lPL1idIxbROg 提取码:cn07

配置Export2Excel.js文件

require('script-loader!file-saver');
require('./Blob');//配置地址根据实际配置
require('script-loader!xlsx/dist/xlsx.core.min');

定义方法

在需要使用的组件中定义方法

export2Excel() {
     require.ensure([], () => {
     const { export_json_to_excel } = require('../vendor/Export2Excel');
     const tHeader = ['序号', '姓名', '性别',];//生成Excel表格的头部标题栏
     const filterVal = ['id', 'xp', 'yp','xy'];//生成Excel表格的内容栏(根据自己的数据内容属性填写)
     const list = this.forlist;//需要导出Excel的数据
     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]))
   }
  },

应用

给按钮添加点击事件

<button @click="export2Excel">导出Excel</button>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 向后台传递不同的参数值,后台查询出符合条件的数据,以文件流的格式返回前端,前端再导出为Excel。如果像普通的方式...
    一名有马甲线的程序媛阅读 5,064评论 1 6
  • 1.首先,先引入三个依赖包,这个是必不可少的 **最好使用cnpm下载,因为我之前试了好久,不使用cnpm,根...
    候鸟与暖风阅读 9,929评论 1 5
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,144评论 1 32
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,741评论 1 45
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,324评论 4 31