form表单 vue 导出文档_4行代码实现vue + element ui的表格数据导出为xlsx文件

需求说明

前端页面通过表格呈现查询数据，并由一个按钮点击事件将表格的数据以xlsx的文件格式导出下载。

开发环境

Chrome + vue 2.0 + Element UI

方案1：XLSX + FILE-SAVER

由于文件下载需求的普遍性，以及vue和Element的流行性，网上类似的方案很多。稍作整理后的形式如下：

// 导出按钮绑定的函数

exportXLSX() {

// 从表格生成workbook

let wb = XLSX.utils.table_to_book(document.querySelector('#tableID'));

let wbout = XLSX.write(wb, {

bookType: "xlsx",

bookSST: true,

type: "array"

});

try {

// 下载

let b = new Blob([wbout], { type: "application/octet-stream" });

FileSaver.saveAs(b, "filename.xlsx");

} catch (e) {

if (typeof console !== "undefined") {

console.log(e, wbout);

}

}

return wbout;

}

该函数流程大致为