vue+elementui表格前端导出excel以及自定义导出样式 |
您所在的位置：网站首页 › vue后端导出excel › vue+elementui表格前端导出excel以及自定义导出样式 |
vue+elementui表格前端导出excel以及自定义导出样式
|
vue+elementui表格前端导出excel以及自定义导出样式 项目遇到前端自己导出表格，我自己把后端给我的数据处理了一波，合并重复列啊，以及表头合并啊。可没想到导出竟然也要前端自己来弄，于是乎请教同事以及博客。学到了学到了。 1，装包 npm install --save xlsx file-saver npm install --save xlsx-style 复制代码2，引入 import FileSaver from "file-saver"; import XLSX2 from "xlsx"; import XLSX from "xlsx-style"; 复制代码3，使用
页面效果：这个页面是根据数据，手动合并了一波的，自动合并重复列，以及表头的效果，所以导出还想要这个样子。
导出效果：
5，事件 setExport2Excel() { /* generate workbook object from table */ var xlsxParam = { raw: true } //这个保证表格只进行解析 不做运算 var wb = XLSX2.utils.table_to_sheet(document.querySelector("#mytable"),xlsxParam);//mytable为表格的id名 // if(!wb['!merges']){ //这个东西是当表格有合并的时候才会存在 并不能作为判断有无数据的标准 // this.$message.warning('无法导出：报表无数据'); // return // } for(var i = 0;i{ let startColNumber = Number(item.s.r), endColNumber = Number(item.e.r); let startRowNumber = Number(item.s.c), endRowNumber = Number(item.e.c); const test = ws[arr[startRowNumber] + (startColNumber + 1)]; for(let col = startColNumber ; col |
【本文地址】
今日新闻 |
推荐新闻 |