前端导出.xlsx表格的几种方法

第一种==========================================
（此方法是导出当前table表格页内的数据，
如果需要导出固定格式或者导出的内容和table无关，请协商后端利用第二种方法导出）

利用插件： 先下载插件
cnpm install -S file-saver xlsx
cnpm install -S script-loader

导出组件：

<template>
  <!-- // 导出按钮  -->
  <el-button type="success" icon="el-icon-upload" @click="exportEvent">导出</el-button>
</template>

<script>
// 引入导出插件
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {};
  },
  //需要的参数
  props: {
    id: {
      type: String,
      default: "Table",
    },
    name: {
      type: String,
      default: "Table",
    },
  },
  methods: {
    // 导出Excel表格事件
    exportEvent() {
      let gatherData = { raw: true };
      let grid = XLSX.utils.table_to_book(
        document.querySelector("#" + this.id),
        gatherData
      );
      let workbook = XLSX.write(grid, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([workbook], {
            type: "application/octet-stream",
          }),
          this.name + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, workbook);
      }
      return workbook;
    },
  },
};
</script>

组件使用：

 <derive :id="spreadsheet.id" :name="spreadsheet.name">导出</derive>

<script>
import derive from "@/components/derive"; //引入公共组件
export default {
  data() {
    return {
      tableData: [], //要导出的表格数组
      spreadsheet: {
        id: "exportTable", //id
        name: "交易数据", //导出文件名
      },
    };
  },
  //注册组件
  components: {
    derive,
  },
};
</script>

二、利用后端接口导出。此方法简单易用，前提是后端需要把导出内容写出来。

 <el-button
            v-if="id"
            type="warning"
            size="small"
            @click="outdc"
            v-preventReClick
            >导出</el-button
          >

 // 导出按钮点击事件
    outdc() {
      const ExportLoading2 = this.$loading({
        lock: true,
        text: '下载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios({
        url: "导出url地址（与后端协商）",
        data: {
          conId: this.conIdQd,
        },
        method: "post",
        responseType: "blob",
        headers: {
          Authorization: localStorage.getItem("Authorization"),
        },
      }).then((res) => {
        ExportLoading2.close();
        var blob = new Blob([res.data], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8",
        });
        var filename = "丢损明细.xlsx";
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.style.display = "none";
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },