这个真的困扰了我整整一天,我尝试了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.xlsx
namestring
);
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
><a
download="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 =
' +
'xmlns="http://www.w3.org/TR/REC-html40">" +
' " +
'{table}
';
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();
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)