Vue - 纯前端导出 Table 表格本页数据（Excel）

前言

注意：不能 条件导出 和 分页导出，只能导出眼前所看到的这一页数据，具体详见代码。
如果想要条件导出和分页导出，请参考 Vue - 下载后端接口返回的文件流（js-file-download）

例如，您页面上有一个如下图所示表格，想要通过点击 导出Excel 按钮，完成 本页 导出且自动下载。

准备工作

你需要通过 npm / yarn / cnpm 进行装包，终端执行如下命令（以 npm 为例）：

npm install file-saver
npm install xlsx

导入依赖

复制以下代码，放置到 exprot default {} 顶部，引入依赖。

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

实现代码

<!-- 注意id必须设置(需要通过id获取到DOM) -->
<table id="table">
	...
</table>
<button @click="exportExcel()">导出本页</button>

/**
 * 导出表格
 * @description 点击按钮导出Excel
 * @param {*}
 * @return void
 */
exportExcel () {
    
    

 // 获取DOM
 let et = XLSX.utils.table_to_book(document.querySelector('#table'));
 
 // config
 let etout = XLSX.write(et, {
    
    
   bookType: 'xlsx',
   bookSST: true,
   type: 'array'
 });
 
 // Blob下载
 try {
    
    
     FileSaver.saveAs(new Blob([etout], {
    
    
         type: 'application/octet-stream'
     }), '客户信息.xlsx');   //导出的文件名及扩展名
 } catch (e) {
    
    }
 
 // return
 return etout;
}