我想在前端用js导出带样式的xlsx文件
用table标签写行内样式,然后导出
导出的文件可以正常打开,且带有样式,后缀也是xlsx
但是!!!
导出的其实是.htm的文件,因为office或者wps可以打开此类文件所以让人产生错觉
我一直在找解决方案
这问题好像无解呀,必须要用xlsx-style吗?
困扰我好久了
贴下代码
<html>
<head>
<p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
<button onclick='tableToExcel()'>导出</button>
</head>
<body>
<script>
const tableToExcel = () => {
// 要导出的json数据
const jsonData = [
{
name:'路人甲',
phone:'123456789',
email:'000@123456.com'
},
{
name:'炮灰乙',
phone:'123456789',
email:'000@123456.com'
},
{
name:'土匪丙',
phone:'123456789',
email:'000@123456.com'
},
{
name:'流氓丁',
phone:'123456789',
email:'000@123456.com'
},
];
// 列标题,逗号隔开,每一个逗号就是隔开一个单元格
let str = `姓名,电话,邮箱\n`;
// 增加\t为了不让表格显示科学计数法或者其他格式
for(let i = 0 ; i < jsonData.length ; i++ ){
for(const key in jsonData[i]){
str+=`${jsonData[i][key] + '\t'},`;
}
str+='\n';
}
// encodeURIComponent解决中文乱码
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
// 通过创建a标签实现
const link = document.createElement("a");
link.href = uri;
// 对下载的文件命名
link.download = "json数据表.csv";
link.click();
}
</script>
</body>
</html>
我是用的这位大佬的导出
https://blog.csdn.net/qq_41995919/article/details/112846402
在用的这个方法导出,的确可以设计非常棒的样式,不过最终没法导出真正的xlsx
我目前是用 js-xlsx 配合yxg-xlsx-style 完成带样式的导出(不过弊端很明显,样式设置很麻烦,且无法是设置高度)
要导出一个真正的 XLSX 文件有以下方法:
How to properly assemble a valid xlsx file from its internal sub-components?
关于使用第三方开源库,我的建议是,如果没有命令禁止使用的话,在符合条件的情况下,只要能帮助项目实现目标的,都可以用.毕竟一般成熟的开源库,把一些我们会遇到的坑都踩过了,可以省掉很大一部分精力.当然如果公司有足够能力和精力去自研的话,就当我没说.