关于vue中表格导出

第一种实现方式  直接使用第三方库导出dom结构

　　1.安装 

npm i html-table-to-excel --legacy-peer-deps

　　2.引入

　　

  import * as htmlTableToExcel from 'html-table-to-excel';

　　3.添加id

 　　4.调用方法

　　

  //   调用安装好的方法(dom,‘表名称’)  

          htmlTableToExcel(document.getElementById('table'), '表格导出');

  //   调用安装好的方法(dom,‘表名称’)  
          htmlTableToExcel(document.getElementById('table'), '表格导出');

 方法二、

　　1安装依赖

　　官网：

https://xlsx.nodejs.cn/docs/api/write-options/

npm i xlsx -S --legacy-peer-deps

npm i file-saver --legacy-peer-deps

　　　2.引入依赖

　　　　

 import FileSaver from 'file-saver';

    import * as XLSX from 'xlsx';

 

 // 获取弹窗中用于导出 Excel 的表格 DOM 元素
        let dom = document.getElementById('table');
        // 将 DOM 表格转换为工作簿对象
        let wb = XLSX.utils.table_to_book(dom);
        // 将工作簿对象以 xlsx 格式写入为二进制数组
        let wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
        // 导出excel
        // XLSX.writeFile(wb, '导出数据.xlsx');
        // 导出excel
        // 使用 FileSaver 将生成的 Excel 文件（Blob 对象）保存到本地，文件名为“导出数据.xlsx”
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出数据.xlsx');