vue 导出Excel表格 更改样式

文件导出一般分为两种类型

（仅限于我所在项目中应用）
1.第一种以文件流的形式导出
2.第二种以参数导出

我们今天分享以vue+element UI 框架table表格勾选数据导出文件

  <el-button
            type="primary"
            icon="el-icon-download"
            @click="handleExportData(diskCode)"
            >导出
  </el-button>

  <el-table
      :data="tableData"
      style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

这里我们用table表格，勾选数据批量导出表格

使用插件

npm install xlsx-js-style

引入

import XLSXS from 'xlsx-js-style';

完整代码

   // 导出
    handleExportData(data) {
      // let thisPage = this;
      let diskCodedata = data.join(",");
      console.log(diskCodedata, "diskCodedata");
      this.$confirm("确认导出数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          axios({
            method: "get",
            params: {
              diskCode: diskCodedata,
            },
            url: process.env.VUE_APP_BASE_API + "/disk/manager/getExcelData",
            headers: { Authorization: "Bearer " + getToken() },
          }).then((res) => {
            if (res) {
              console.log("res.data", res.data);
              let arr = res.data.data.map((item) => {

              //要打印的数据类型（这些数据是我自己的）

                return {
                  编号: item.label,
                  时间: item.createTime,
                  格式包名称: item.fileName,
                  文件路径: item.filePath,
                  状态: item.statusName,
                };
              });
              console.log("arr", arr);

              let sheet = XLSX.utils.json_to_sheet(arr);
              let book = XLSX.utils.book_new();
              // // 设置列宽，有些文件内容很长，这里设置想要的宽度
              const cols = [
                { wch: 30 },
                { wch: 30 },
                { wch: 40 },
                { wch: 20 },
                { wch: 10 },
              ];
              sheet["!cols"] = cols; // 将cols添加到sheet中
              // sheet1表示要导出的分区名字
              XLSX.utils.book_append_sheet(book, sheet, "sheet1");
              console.log("book", book);
              // 可以修改成其它名字
              XLSX.writeFile(book, `导出内容${new Date().getTime()}.xls`);
              return;
            }
          });
        })
        .catch(function () {});
    },