jquery吧页面＜table＞里的内容导出为excel

1、问题描述

之前是用Blob把页面的

导出成.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导出Excelbutton>
		<table id="MyTable">
			<tbody>
				<tr>
					<th rowspan="2" nowrap="">POth>
					<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是不带

样式的，原本我想把单元格加粗，但是看了半天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导出Excelbutton>
 
		<table id="MyTable">
			<tbody>
				<tr>
					<th rowspan="2" nowrap="">POth>
					<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源码里面，都是写死的默认不带任何样式，我试着在这里添加样式：

，但是导出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导出Excelbutton>
		<table id="MyTable">
			<tbody>
				<tr>
					<th rowspan="2" nowrap="">POth>
					<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)

相关阅读:
【WPF】根据选项值显示不同的编辑控件（使用DataTemplateSelector）
控制力士乐油研阿托斯比例阀信号转换器放大器
IDEA中的“Deployment“ 将项目直接部署到服务器上
在20.04.4 LTS (Focal Fossa)学习CommonAPI-C---D-Bus
Eureka源码2-Eureka预备知识和核心类
LabVIEW编程LabVIEW控制C-863.12 水星控制器例程与相关资料
设置网站置灰 css / js
SignalR示例
一阶系统阶跃响应实现规划方波目标值
Oracle/PLSQL: Bin_To_Num Function

原文地址：https://blog.csdn.net/weixin_42032770/article/details/127912869