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;
    }
  },

进入前端入门建站教程官网入口

el-table合并行的通用方法（附js代码）

el-table利用:row-style="rowClass"设置指定行变色

excel拆分单元格快捷键怎么用

vuejs简单介绍vue安装和卸载方法

el-table表格显示selection多选时对某些复选框设置禁止选中

标签： el-table, excel, vuejs, 导出

上面是“vuejs el-table导出excel表格”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2098.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！