1、问题描述
之前是用Blob把页面的<table>导出成.xls的Excel文件:Blob把html导出为excel文件_金斗潼关的博客-CSDN博客
不过由于微软的Excel对.xls扩展名的文件支持不是很好,打开会报一个警告
所以用户反馈说是不想弹出这个警告,要求导出的文件为xlsx格式。
2、产生原因
.xls后缀名过时了
3、解决方法
不要导出.xls,导出成.xlsx就行了。
方法一、使用sheet.js
GitHub - SheetJS/sheetjs: 📗 SheetJS Community Edition -- Spreadsheet Data Toolkit
<script type="text/javascript" charset="utf-8" src="/SheetJsDemo/js/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf-8" src="/SheetJsDemo/js/xlsx.full.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnExport").click(function() {
const table = document.getElementById("MyTable");
const new_sheet = XLSX.utils.table_to_book(table);
XLSX.writeFile(new_sheet, "SheetJSTable.xlsx");
});
});
</script>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button name="btnExport" id="btnExport" class="btn">sheetJS导出Excel</button>
<table id="MyTable">
<tbody>
<tr>
<th rowspan="2" nowrap="">PO</th>
<th rowspan="2" nowrap="">型号</th>
<th rowspan="2" nowrap="">采购数量</th>
<th colspan="5" nowrap="">入库</th>
<th colspan="1" nowrap="">出库</th>
</tr>
省略以下html代码。。。。。
导出来的xlsx是这样子的(注意:sheetjs导出.xlsx是不带<table>样式的,原本我想把单元格加粗,但是看了半天sheetJS文档也没看到哪里有设置的)Overview | SheetJS Community Edition
方法二、使用tableExport.js
mirrors / kayalshri / tableexport.jquery.plugin · GitCode
<script type="text/javascript" charset="utf-8" src="/SheetJsDemo/js/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf-8" src="/SheetJsDemo/js/tableExport.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnExport1").click(function() {
$('#MyTable').tableExport({
type: 'excel',
fileName: "tableExportJS",
mso: {
fileFormat: 'xlsx'
}
});
});
});
</script>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button name="btnExport1" id="btnExport1" class="btn">tableExportJS导出Excel</button>
<table id="MyTable">
<tbody>
<tr>
<th rowspan="2" nowrap="">PO</th>
<th rowspan="2" nowrap="">型号</th>
<th rowspan="2" nowrap="">采购数量</th>
<th colspan="5" nowrap="">入库</th>
<th colspan="1" nowrap="">出库</th>
</tr>
tableExport.js导出成.xlsx也是无法修改导出表格的样式的。
我看tableExport.js源码里面,都是写死的默认不带任何样式,我试着在这里添加样式:<table border=1>,但是导出xlsx不生效没带边框,但如果导出xls则有效,导出的xls表格确实带边框了
导出成.xls
<script type="text/javascript" charset="utf-8" src="/SheetJsDemo/js/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf-8" src="/SheetJsDemo/js/xlsx.full.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/SheetJsDemo/js/tableExport.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnExport2").click(function() {
$('#MyTable').tableExport({
type: 'excel',
fileName: "tableExportJS"
});
});
});
</script>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button name="btnExport2" id="btnExport2" class="btn">tableExportJS导出Excel</button>
<table id="MyTable">
<tbody>
<tr>
<th rowspan="2" nowrap="">PO</th>
<th rowspan="2" nowrap="">型号</th>
<th rowspan="2" nowrap="">采购数量</th>
<th colspan="5" nowrap="">入库</th>
<th colspan="1" nowrap="">出库</th>
</tr>
4、总结
无论是sheetJS还是tableExport.js,导出成.xlsx后缀的excel文件都是不支持带边框线的,这个我查了文档没有找到相应的导出xlsx带边框线的demo,并且网上搜出来的凡是导出可以带边框线的excel都是导出为.xls后缀名的。这个如果有谁知道如何在前端把html导出成.xlsx后缀名的excel且可以设置边框线的,希望能够也告诉我一下。
.csv、.xls、.xlsx的区别
这三种后缀名是目前网页端导出excel的主流后缀名。其中xlsx后缀名是微软excel目前支持的官方正统格式,.xls是2003年版的微软excel的格式,目前已经过时了。.csv是以逗号分隔值的文件格式,其以纯文本形式存储表格数据(数字和文本),可以用Excel软件打开。由于csv原则上存储数据量大小没有限制,所以一般的网页导出都喜欢导出成csv格式,像一些数据集这种,里面的数据可能非常多,导出成csv就没有大小限制了。
.xls支持html文本,一个html文本表格,把它另存为.xls文件,再打开后就是一个带有样式的表格了。
而.xlsx是不支持html文本的,如果把html文本另存为.xlsx后缀的文件,那么就会打不开了。
5、疑问
如何把前端的html导出为.xlsx后缀的excel并给其设置样式(边框线,字体加粗,自动换行等)
已经有解决方法了,可以使用sheet.js的table_to_sheet,可参考:sheet.js实现多个html的表格分为多个sheet导出为一个excel_金斗潼关的博客-CSDN博客
6、参考资料
tableExport.js导出带边框的excel_Tronyel的博客-CSDN博客
tableExport导出 excel报表_哪 吒的博客-CSDN博客
tableExport导出.xlsx格式_慢半拍、的博客-CSDN博客
基于SheetJS以及XLSX-Style的纯前端带样式导出表格为Excel工具包 - 攻城猿的个人空间 - OSCHINA - 中文开源技术交流社区
js利用sheetjs生成excel并导出_QingHan_wow的博客-CSDN博客
https://docs.sheetjs.com/docs/csf/features/#row-and-column-properties
敲黑板,表格后缀xls、xlsx、xlsb、xlsm、csv分别是什么意思? - 腾讯云开发者社区-腾讯云 (tencent.com)