vue导出Excel文件（入门篇）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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文件（入门篇） 的全部内容， 来源链接： utcz.com/z/378082.html

回到顶部