纯前端实现excel下载功能

• 借助npm xlsx

// 安装
npm install xlsx --save
// npm xlsx 地址
https://www.npmjs.com/package/xlsx

方式一（获取页面table元素）

import XLSX from "xlsx"
createElsx(){
// 获取表格的dom元素
var elt = document.getElementsByTagName('table')[0];
console.log(elt)
// 将表格的dom 元素转化为 excel工作薄
var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"});
// 将工作薄导出为excel文件
XLSX.writeFile(wb,'file.xlsx');
}

方式二（将数据转化为数组 进行导出）

import XLSX from "xlsx"
createElsx(){
let arr =[
["序号",'姓名','年纪'],
["0",'1212','15'],
["1",'12313','15'],
]
// 将数组转化为标签页
var ws = XLSX.utils.aoa_to_sheet(arr);
// 创建工作薄
var wb = XLSX.utils.book_new()
// 将标签页插入到工作薄里
XLSX.utils.book_append_sheet(wb,ws)
// 将工作薄导出为excel文件
XLSX.writeFile(wb,'file.xlsx');
}

项目中使用经验：
1、后台管理系统用的antdesign-ui框架，并不能像方式一中直接获取到table元素并生成excel。

• 可以创建一个table元素对象，分别获取到页面中的thead和tbody 元素，然后进行深拷贝元素插入table对象，在用table对象进行下载。(直接appendChild会导致页面的表格消失，cloneNode拷贝需要传true深拷贝否则只有第一层元素)

createElsx = () => {
    var tabs = document.getElementsByClassName('ant-tabs-tabpane-active')[0];
    var tbody = tabs.getElementsByClassName('ant-table-tbody')[0].cloneNode(true);
    var thead = tabs.getElementsByClassName('ant-table-thead')[0].cloneNode(true);
    var table = document.createElement("table");
    table.appendChild(thead);
    table.appendChild(tbody);
    // 将表格的dom 元素转化为 excel工作薄
    var wb = XLSX.utils.table_to_book(table, { raw: true });// 解决%消失的问题
    var excelFileName = `${currentName}负载率`;
    // 将工作薄导出为excel文件
    XLSX.writeFile(wb,`${excelFileName}.xlsx`);
    }