普通方式

下包

npm i -S file-saver xlsx

在util文件夹新建类

建立to_xlsx.js

import FileSaver from ‘file-saver‘;

import XLSX2 from ‘xlsx‘;

class ToXlsx {

// id指的是绑定数据的table的id，

// title指的是导出表格的名称，记得带后缀xlsx，例如：title=‘重复导.xlsx‘;

constructor (id, title) {

this.id = id;

this.title = title;

}

async createTable() {

// 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，

let fix = document.querySelector (‘.el-table__fixed‘);

let wb;

if (fix) {

wb = XLSX2.utils.table_to_book(document.querySelector(this.id).removeChild(fix));

document.querySelector(this.id).appendChild(fix);

} else {

wb = XLSX2.utils.table_to_book(document.querySelector(this.id));

}

/* get binary string as output */

let wBout = XLSX2.write(wb, {

bookType: ‘xlsx‘,

bookSST: true,

type: ‘array‘

});

try {

FileSaver.saveAs(

new Blob([wBout], {

type: ‘application/octet-stream‘

}),

this.title

);

} catch (e) {

if (typeof console !== ‘undefined‘) console.log(e, wBout);

}

return wBout;

}

}

export default ToXlsx

使用

在js页面直接import，然后使用

import ToXlsx from "../../utils/to_xlsx";

// 参数1 表格id

// 参数2 保存的excel文件名

let xlsx = new ToXlsx(‘#table-data‘, ‘下载.xlsx‘);

xlsx.createNormalTable()

参考资料

自定义样式

下包

npm i -S xlsx-st