前端将表格导出为excel

利用插件将table导出为excel

1. 下载对应插件 xlsx、file-saver

   npm install --save xlsx file-saver
   

   注：下载的时候如果下载不动，可更换npm的镜像源

   官方镜像：https://registry.npmjs.org/

   淘宝镜像：https://registry.npm.taobao.org/

   cnpm镜像：https://r.cnpmjs.org/

   阿里云镜像：https://npm.aliyun.com/

   中国科技大学镜像：https://mirrors.ustc.edu.cn/npm/

   华为云镜像：https://mirrors.huaweicloud.com/repository/npm/

   七牛云镜像：https://npm.qiniu.com/

   // 设置镜像
   npm config set registry https://r.cnpmjs.org/
   // 查看当前镜像地址
   npm config get registry
   

2. 代码

   // 给需要导入的表格增加一个id，或者绑定ref；目的是用来获取dom元素
   <t-table
    	id="table_excel"
       ref="table"
       :data="tableData"
       :columns="columns">
   </t-table>
   
   // 引入相关插件
   import FileSaver from 'file-saver';
   import XLSX from 'xlsx';
   
   // 导出方法
   exportExcel() {
   	// 导出的内容只做解析，不进行格式转换
   	const xlsxParam = { raw: true }; 
   	// 获取到需要导出表格的dom元素
       const tables = document.getElementById('table_excel'); 
       const table_book = XLSX.utils.table_to_book(tables, xlsxParam);
       const table_write = XLSX.write(table_book, {
           bookType: 'xlsx',
           bookSST: true,
           type: 'array',
       });
       try {
           FileSaver.saveAs(
             new Blob([table_write], { type: 'application/octet-stream' }),
             `表格名称.xlsx`, // 这里是文件名
           );
       } catch (e) {
           if (typeof console !== 'undefined') console.log(e, table_write);
       }
       return table_write;
   }