element 导出全部、导出指定列或指定行

首先下载xlsx和file-saver的依赖

npm install --save xlsx file-saver

在需要的组件引入xlsx和file-saver

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

第一种:导出整个表格

参考的文件地址:https://www.cnblogs.com/charles8866/p/11303397.html

各位可以这个地址看看,比较详细

给table表格设置一个id

<el-table id="out-table"></el-table>

导出按钮绑定导出的方法

<el-button type="primary" @click="exportExcel">导出</el-button>

在methods中写导出的方法

exportExcel() {
  var xlsxParam = { raw: true }
  let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),xlsxParam);
  let 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);
  }
  return wbout;
}

如果表格使用了固定列fixed属性,会导出两个重复表格,需要改下代码

exportExcel() {
  var xlsxParam = { raw: true }
  var table = document.querySelector('#out-table').cloneNode(true)
  table.removeChild(table.querySelector('.el-table__fixed')) 
  //通过css选择器获取一个table表格
  var wb = XLSX.utils.table_to_book(table, xlsxParam)
  let 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);
  }
  return wbout;
}

这种导出并不适用有操作列的表格,导出的表格会有操作这一列

第二种:导出指定列或导出指定行

参考地址:https://blog.csdn.net/qq_36942042/article/details/103367084

此方法除下载xlsx和file-saver的依赖外,另外需要下载script-loader的依赖和Blob.js和Export2Excel.js

下载script-loader的依赖

npm install -D script-loader

Blob.js和Export2Excel.js

链接:https://pan.baidu.com/s/1VVLvHW4syBAUN0chrighGA 
提取码:jksk

Export2Excel.js的修改

element 导出全部、导出指定列或指定行

参考:在src文件夹下创建excel文件夹

element 导出全部、导出指定列或指定行

页面不需要引入xlsx、file-saver和script-loader

exportHzb() {
  let that = this;
  require.ensure([], () => {
    const { export_json_to_excel } = require('@/excel/Export2Excel'); 
    //使用绝对路径引入Export2Excel.js
    const tHeader = ['姓名','性别',]; // 导出的表头名
    const filterVal =['name','sax',]; // 导出的表头字段名
    const list = that.dataList;
    //把table表格绑定的数组赋值给list,如果是多选后导出,把多选后绑定的数组赋值给list
    const data = that.formatJson(filterVal, list);
    export_json_to_excel(tHeader, data, '导出文件名');
  });
},
formatJson (filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]));
},

上一篇:Vue 把表格导出 Excel 文件及打印


下一篇:如何启用新款iMac 2021 的彩色Hello屏幕保护程序?