首页 > 其他 > 详细

vue导出Excel文件(入门篇)

时间:2020-09-29 19:49:53      阅读:374      评论:0      收藏:0      [点我收藏+]

1、在src目录下创建一个目录vendor,放入Blob.js和Export2Excel.js

2、安装相关组件
  npm install -S file-saver 用来生成文件的web应用程序
  npm install -S xlsx 电子表格格式的解析器
  npm install -D script-loader 将js挂在在全局下

3、修改js文件中地址

  技术分享图片

 

 4、使用

  在相关组件中引入(好像不引入也可以,之前已经挂在全局)

import Blob from "@/vendor/Blob";
import Export2Excel from "@/vendor/Export2Excel.js";
    //导出Excel
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel");
        //头
        const tHeader = ["编号", "姓名", "时间"];
        //对应的标签
        const filterVal = ["id", "name", "date"];
        //标签对应的内容  是一个数组结构
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "销售报表");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
    //导出结束

  按钮触发该方法:

<el-button type="warning" @click="export2Excel">
    <i class="el-icon-upload2"></i>&nbsp;导出Excel
</el-button>

 

vue导出Excel文件(入门篇)

原文:https://www.cnblogs.com/116970u/p/13751395.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!