Vue + ElementUI之前端导出Excel表格

发表于2021-09-22更新于2021-11-30字数统计657阅读时长5分

表格导出

安装依赖

1
npm install --save xlsx file-saver

导入依赖

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

给你的el-table一个标识

1
2
3
4
5
6
7
8
<el-table
  border
  id="saleTable"
  v-loading="loading"
  :data="qljProductList"
  @selection-change="handleSelectionChange"
  :span-method="objectSpanMethod"
>

比如这里给出一个id="saleTable"，后面我们就使用document.querySelector来找到该表格下的数据

定义导出方法

1
<el-button size="mini" @click="handleExportElTable">导出</el-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 纯前端导出Excel表格
handleExportElTable() {
  //  .table要导出的是哪一个表格
  const wb = XLSX.utils.table_to_book(document.querySelector("#saleTable"));
  const 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;
},

效果展示

系统界面

前端导出Excel

导出界面

导出Excel表格界面

自定样式

使用xlsx-style

安装xlsx-style

1
npm install xlsx-style --save

修改xlsx-style源码防止报错

在ruoyi-ui\node_modules\xlsx-style\dist\cpexcel.js中做出如下修改：

将var cpt = require('./cpt' + 'able');改为var cpt = cptable;

Vue中的核心代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 导入依赖
import XLSXS from "xlsx-style"

// 使用xlsx-style 去写入
const wb = XLSX.utils.table_to_book(document.querySelector("#Table"), {sheet: 'SHEETJS'});
this.setExlStyle(wb['Sheets']['SHEETJS']);
const wbOut = XLSXS.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "buffer"
})

// 定义样式函数, 我这里设置单元格文本水平、垂直居中
setExlStyle(data) {
  data['!cols'] = [];
  for (let key in data) {
    if (data.hasOwnProperty(key)) {
      if (data[key] instanceof Object) {
        data[key].s = {
          alignment: {
            horizontal: 'center',
            vertical: 'center'
          },
          font: {
            sz: 11
          },
          bold: true,
          numFmt: 0
        }
        data['!cols'].push({wpx: 115});
      }
    }
  }
  return data;
},

其中，单元格对象的属性如下：

v：原始值

w：格式化文本

t：单元格类型：b：Boolean，n：Number，e：error，s：String，d：Date

f：单元格公式

r：富文本编码

h：富文本的HTML渲染

c：与单元格关联的注释

z：与单元格关联的数字格式字符串

l：单元格超链接对象

s：单元格的样式/主题

效果

效果

问题记录

导出表格出现重复数据

原因

如果element-ui的el-table使用了fixed属性固定列，导出表格时会出现导出两次的问题，是因为在el-table中有两个table标签。

解决方案
1
2
3
4
let table = document.querySelector("#"+tableID).cloneNode(true);
// 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
table.removeChild(table.querySelector(".el-table__fixed"))
let wb = XLSX.utils.table_to_book(table, {raw:true});