vue3.0导出excel带格式

这个真的困扰了我整整一天，我尝试了xlxs file-saver两个组件的版本，怎么搞都不行

先不说vue3.0 不能import进来，只能require(‘xlxs’),require(‘file-saver’)
把这两个插件引入是能导出excel的，但是不支持更改样式；
写法如下：

 function exportFun() {const time = new Date().getTime();var XLSX = require("xlsx");let namestring = "";var wb;wb =XLSX &&XLSX.utils.table_to_book(document.querySelector("#exporttable"),{raw:true});          exportfile(wb, namestring);
}
function exportfile(wb: any, namestring: any) {var XLSX = require("xlsx");var wbout =XLSX &&XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});let FileSaver = require("file-saver");try {// let buf = s2ab(wbout)FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),// 设置导出文件名称 xxx.xlsxnamestring);close();} catch (e) {if (typeof console !== "undefined") console.log(e, wbout);}
}

查了另一种方式，通过Blob.js,Export2Excel的写法，参考： https://www.cnblogs.com/-wenli/p/14843432.html，但是我代码写法是ts，调了半天总算不报错了，结果还是跑不起来，放弃

或者引入xlxs-style插件修改，但是这个需要修改源代码，我想着到时候打包到生产得手动打包，项目不允许就放弃这个方法了，到底能不能跑起来暂时未知

终于找到了一个方法：参考https://www.jb51.net/article/186856.htm，解决了，困扰了我一天的问题解决了，就这么几行代码，啥都不用安装，原理暂时不懂，但是解决了问题。等有时间研究研究

template里面的东西<el-button @click="exportFun">导出</el-button><adownload="table导出Excel"id="excelOut"href="#"rel="external nofollow">table导出Excel</a><table border="1" style="height: 200px; width: 1200px" id="exporttable"><tr><td colspan="9" style="color: red; font-size: 22px">标题111111111</td><!--注意此处的td标签由原来的三个变为一个--></tr><tr><td>报送机关名称</td><td>123123</td><td colspan="7">111</td></tr><tr><td><span style="color: red">必填</span>报告期限</td><td>8</td><td colspan="7">6</td></tr><tr><td>填报日期</td><td>8</td><td colspan="7">6</td></tr><tr><td colspan="9">填表说明：；<br />这是数据 <br />换行了 </td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr></table>js里面的代码：function exportFun() {tableToExcel("exporttable", "下载模板");}//base64转码function base64(s: any) {return window.btoa(unescape(encodeURIComponent(s)));}//替换table数据和worksheet名字function format(s: any, c: any) {return s.replace(/{(\w+)}/g, function (m: any, p: any) {return c[p];});}function tableToExcel(tableid: any, sheetName: any) {var uri = "data:application/vnd.ms-excel;base64,";var template ='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +"<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>" +"</x:ExcelWorkbook></xml><![endif]-->" +' <style type="text/css">' +"table td {" +"border: 1px solid #000000;" +"width: 200px;" +"height: 30px;" +" text-align: center;" +"background-color: #4f891e;" +"color: #ffffff;" +" }" +"</style>" +'</head><body ><table class="excelTable">{table}</table></body></html>';if (!tableid.nodeType) tableid = document.getElementById(tableid);var ctx = {worksheet: sheetName || "Worksheet",table: tableid.innerHTML,};const a: any = document.getElementById("excelOut");a.href = uri + base64(format(template, ctx));a.click();}

vue3.0导出excel带格式相关推荐

【原】winform高效导出Excel带格式设置
参考网上的方法修改,1000条记录导出只要3S(1GRDM,C2.8CPU). 1.项目添加excel对象类库的引用,Microsoft Excel 11.0 object library(不同版本的 ...
winform高效导出Excel带格式设置
参考网上的方法修改,1000条记录导出只要3S(1GRDM,C2.8CPU). 1.项目添加excel对象类库的引用,Microsoft Excel 11.0 object library(不同版本的 ...
POI 导出excel带小数点的数字格式显示不对解决方法
POI 导出excel带小数点的数字格式显示不对解决方法参考文章: (1)POI 导出excel带小数点的数字格式显示不对解决方法 (2)https://www.cnblogs.com/firstd ...
POI导出EXCEL带水印以及单元格格式设置
客户提个需求,需要将报表导出 excel带水印和 pdf带水印 2个版本. 做的时候连excel本身怎么带水印都不知道,更不用说用java了.后来在网上搜到了excel添加水印的2个方法. 1.艺术 ...
java导出excel带图片_JAVA的poi实现模版导出excel(带图片).doc
JAVA的poi实现模版导出excel(带图片) 下面是本人使用java的poi实现使用模板到处excel,内容包含图片,使用两种不同的方式实现其到处excel.但是使用jxl实现到处excel只能到 ...
Hutool导出excel带前台Base64图片
Hutool导出excel带前台Base64图片,hutool并没有封装具体方法,需要自己手动插入. @Data public class PicDto {private String chartBa ...
NPOI导出Excel百分比格式
NPOI导出Excel百分比格式 using using System; using System.Collections.Generic; using System.Data; using Syst ...
asp导出EXCEL数字格式及自动适应宽度的问题
asp导出EXCEL数字格式及自动适应宽度的问题下面直接进行代码演示: <% If Response.IsClientConnected Then Response.Flush Else Re ...
maatwebsite/Excel 3.0 导出 Excel 如何设置长数字为文本
maatwebsite/Excel 3.0 导出 Excel 如何设置长数字为文本我这里是 'C' 这几列是超过 15 位数字,自动转换为了科学计数法,所以直接绑定这几列即可. https://gi ...

vue3.0导出excel带格式

vue3.0导出excel带格式相关推荐

最新文章

热门文章