vue导出分页表格到Excel中

vue导出分页表格到Excel中

  1. 安装依赖项
npm install --save xlsx file-saver
  1. 在使用的页面引入
import FileSaver from "file-saver";
import XLSX from "xlsx";

3.具体代码()

 <el-button type="primary" size="medium" @click="exportExcel"
        >导 出el-button
      >
exportExcel() {
      //因为此处有分页,每页展示14条数据,在方法调用的开始,展示所有数据,导出之后再把条数更改过来
      this.pagesize = this.tableData.length;
      setTimeout(() => {
        var wb = XLSX.utils.table_to_book(document.querySelector(".el-table"));
        /* get binary string as output */
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "汇总统计.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        //在此处更改回来
        this.pagesize = 14;
        return wbout;
      }, 100);
    },

你可能感兴趣的:(前端,excel,vue,javascript)