关于vue中如何把数据导出成excel文件

1. 安装依赖

yarn add file-saver
yarn add xlsx
yarn add script-loader --dev

2. 导入两个JS文件

链接在这儿 密码:ryab

下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件

3. 在组件中使用

在methods中添加下面两个方法

 downloadPayslips() {
      if (this.selected.length === 0) {
        this.$snackbar().showError("下载失败,请选择正确的数据", "error");
      }
      const tHeader = ["部门", "员工类型", "员工工号", '员工姓名', "基本薪资合计", "每月加给合计", "绩效奖金合计"];
      // 上面设置Excel的表格第一行的标题
      const filterVal = ["dep", "type", "number", 'name', "base_sal", "month_bonus", "performance"];
      // 上面的index、nickName、name是tableData里对象的属性
      const list = this.selected; //把data里的tableData存到list
      const data = this.formatJson(filterVal, list);
      export_json_to_excel(tHeader, data, "员工年平均工资");
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
Last modification:June 23rd, 2020 at 02:27 pm
来杯coffee吧