vuejs el-table导出excel表格

做一个el-table导出excel表格,不需要在导出js中传头部及内容数据,xlsx直接获取当前数据。

1、引入插件


import FileSaver from "file-saver";
import XLSX from "xlsx";

2、在methods引入以下代码


exportFunc: function(e) {
    var wb = XLSX.utils.table_to_book(document.getElementById("exportExcelData"));
    // 得到二进制字符串作为输出
    var wbout = XLSX.write(wb, {
      bookType: "xlsx",
      type: "binary",
    });
    //控制导出excel表格的宽度
    let wscols = [
      { wch: 24 },
      { wch: 24 },
      { wch: 12 },
      { wch: 12 },
      { wch: 12 },
      { wch: 12 },
      { wch: 12 },
      { wch: 24 }
    ]
    wb.Sheets.Sheet1["!cols"] = wscols;
    FileSaver.saveAs(
      new Blob([this.s2ab(wbout)], {
        type: "application/octet-stream",
      }),
      "文件名称.xlsx"
    );
  },
  s2ab: function(s) {
    var cuf;
    var i;
    if (typeof ArrayBuffer !== "undefined") {
      cuf = new ArrayBuffer(s.length);
      var view = new Uint8Array(cuf);
      for (i = 0; i !== s.length; i++) {
        view[i] = s.charCodeAt(i) & 0xff;
      }
      return cuf;
    } else {
      cuf = new Array(s.length);
      for (i = 0; i !== s.length; ++i) {
        cuf[i] = s.charCodeAt(i) & oxFF;
      }
      return cuf;
    }
  },
以上是编程学习网小编为您介绍的“vuejs el-table导出excel表格”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。

本文标题为:vuejs el-table导出excel表格

基础教程推荐