JavaScript SheetJS将 Html 表转换为 Excel 文件

JavaScript SheetJS将 Html 表转换为 Excel 文件在本教程中,我们可以在客户端从我们的HTML表数据创建一个excel文件。即使用javascript将HTML表导出到Excel(.xlsx)。有许多可用的库可以从HTML表创建CSV文件或xlsx文件,但所有库都给出了提示消息。那就是当我们打开该excel文件时,它会提示一条消息,文件名的文件格式和扩展名不匹配。该文件可能已损坏或不安全。今天这篇文章将使用SheetJS,它允许我们在没有任何提示信息的情况下创建和打开excel文件,这是纯javascript的。使用..

大家好,又见面了,我是你们的朋友全栈君。

在本教程中,我们可以在客户端从我们的 HTML 表数据创建一个 excel 文件。即使用javascript将HTML 表导出到Excel (.xlsx)。

有许多可用的库可以从 HTML 表创建 CSV 文件或 xlsx 文件,但所有库都给出了提示消息。那就是当我们打开该excel文件时,它会提示一条消息,文件名的文件格式和扩展名不匹配。该文件可能已损坏或不安全。 

今天这篇文章将使用SheetJS,它允许我们在没有任何提示信息的情况下创建和打开excel文件,这是纯javascript的。

使用 SheetJs 库的第二个优点是它可以轻松地将大型 HTML 表格导出到 excel中,下面提供了一个示例。

您还可以查看我关于如何在客户端 将 HTML 转换为图像的文章。

使用 JavaScript 将 HTML 表格导出到 Excel 的步骤

  1. HTML 标记:添加带有一些数据的表格。
  2. 导入 SheetJS 库
  3. Javascript 代码:使用 SheetJS 库将表格数据导出到 excel 文件中。

HTML 标记:添加带有数据和按钮标记的表格。

这里首先我们添加一个带有一些虚拟数据和一个按钮标签的 HTML 表格。我们的表格 HTML 标记如下所示。

<table id="tbl_exporttable_to_xls" border="1">
	<thead>
		<th>Sr</th>
		<th>Name</th>
		<th>Location</th>
		<th>Job Profile</th>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td><p>Amit Sarna</p></td>
			<td>Florida</td>
			<td>Data Scientist</td>
		</tr>
		<tr>
			<td>2</td>
			<td><p>Sagar Gada</p></td>
			<td>California</td>
			<td>Sr FullStack Dev</td>
		</tr>
		<tr>
			<td>3</td>
			<td><p>Ricky Marck</p></td>
			<td>Nevada</td>
			<td>Sr .Net Dev</td>
		</tr>           
	</tbody>
</table>
<button onclick="ExportToExcel('xlsx')">Export table to excel</button>

在我们的网页上下载并导入 SheetJS 库

要将 HTML 表格数据转换为 excel,我们需要使用SheetJS库。使用 SheetJs,我们可以轻松地将表格数据转换为 Xls 文件。我们可以从Github下载 js 文件或直接使用CDN 托管文件

导入库代码如下:

<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

我们完成了 HTML 标记并导入 Sheetjs 库。接下来,我们必须在按钮单击时添加和调用 javascript 函数,即 ExportToExcel。

JavaScript 代码:使用 Sheetjs 库将表格数据导出到 excel 文件中。

这里在按钮标签上,我们添加一个onclick事件,调用js方法即ExportToExcel。最终的javascript方法如下所示:

function ExportToExcel(type, fn, dl) {
       var elt = document.getElementById('tbl_exporttable_to_xls');
       var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
       return dl ?
         XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
         XLSX.writeFile(wb, fn || ('MySheetName.' + (type || 'xlsx')));
    }

在上面的 javascript 函数中,tbl_exporttable_to_xls 是我们要导出的 HTML 表的 id。另外,我们设置了base64类型,所以对于旧浏览器IE浏览器没有问题。

在 Internet Explorer 即使用 SheetJS 的浏览器中,我们可以轻松地将 HTML 表格数据导出到 Excel。使用 sheetjs库,我们可以将 Html 表格导出为带格式的 xlsx。

结论:这里使用SheetJS我们可以将Html表格导出到一个excel文件中。此外,当其他库在打开 excel 文件时显示弹出消息时,这里使用 Sheetjs 它会在没有任何弹出消息的情况下打开。我发现这个最好的 javascript 库用于将数据转换为 excel 文件。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/160704.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 项目范围管理知识领域共有六个过程_项目范围管理的主要内容

    项目范围管理知识领域共有六个过程_项目范围管理的主要内容项目范围管理项目范围管理包括确保项目做且只做所需的全部工作,以成功完成项目的各个过程。管理项目范围主要在于定义和控制哪些工作应该包括在项目内,哪些不应该包括在项目内项目范围管理的各个过程,包括:5.1规划范围管理一创建范围管理计划,书面描述将如何定义、确认和控制项目范围的过程。5.2收集需求—一为实现项目目标而确定、记录并管理干系人的需要和需求的过程5.3定义范围——制定项目和产品详细描述…

  • ibm x201 怎么清理内部_联想 Thinkpad x201i怎么拆机清理风扇灰尘?_硬件教程「建议收藏」

    ibm x201 怎么清理内部_联想 Thinkpad x201i怎么拆机清理风扇灰尘?_硬件教程「建议收藏」笔记本散热风扇使用时间长了就累积很多灰尘,堵塞出风口,从而大幅降低散热效果。因此有必要对其清理。要彻底清理风扇灰尘,需要拆机方可。首先要把笔记本的电池取下。这款笔记本的硬盘仓很隐蔽,不过在D面还是有明显的图标提示,拧下螺丝和卡扣,即可看到硬盘。硬盘盖拆下来之后,只需用力的拔出黑带即可把硬盘取下。电池、硬盘、内存都取下之后,我们用螺丝刀把D壳周围的螺丝你拧下,之后就可以开始拆卸键盘以及外壳了。拆卸键…

  • 联想st510开卡软件_固态硬盘修复(慧荣sm2246XT主控开卡教程)

    联想st510开卡软件_固态硬盘修复(慧荣sm2246XT主控开卡教程)本帖最后由lwj2996868501于2019-3-2513:12编辑此教程仅适用于固态硬盘且主控SM2246XT的,不是这个主控的就没必要看下去了!准备工具:起子,镊子(铁丝也行),坏固态硬盘,sata转USB转接卡(硬盘盒也可以),慧荣sm2246XT开卡工具(此帖子只提供一个版本的工具,其他版本自行网上下载,这个主控开卡工具版本很多具体用什么版本网上找就找得到界面都是一样的。不用一…

  • 工程伦理学_笔记(复习用)「建议收藏」

    工程伦理学_笔记(复习用)「建议收藏」工程伦理学第一章工程与伦理1.1如何理解工程一、技术与工程的区别二、技术与工程的联系三、工程的定义四、工程的过程五、工程具有不确定性和探索性六、理解工程活动的7个维度1.2如何理解伦理一、道德与伦理二、不同的伦理立场三、伦理困境与伦理选择1.3工程实践中的伦理问题一、工程活动中的行动者网络(具有动态性和网络性)二、主要的工程伦理问题三、工程伦理问题的特点1.4如何处理工程实践中的伦理问题一、工程实践中伦理问题的辨识二、处理工程伦理问题的基本原则三、应对工程伦理问题的基本思路第二章工程中的风险、安

  • grep 命令详解_grep命令详解

    grep 命令详解_grep命令详解一:grep命令的基本概念和用途grep命令是linux中一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来。在一个或多个文件中搜素字符串模式,如果字符串模式包括空格,也必须被引用,模式后的所有字符串被看作文件名。搜索的结果被送到标准输出(stdout),不影响原文件内容。grep也可以用于shell脚本,因为grep通过返回一个状态值来说明搜索的结果,如果模式搜索成功,则返回0;如果搜索不成功,则返回1;如果搜索的文件不存在,则返回2;我们利用这些返回值就可以进行一些自动化的文

  • ios touchesBegan不触发

    ios touchesBegan不触发iostouchesBegan不触发今天简单写了一个touchesBegan,发现无法触发,点击无效,网上找了半天没有效果。最终发现问题是uiimageview需要开启交互:

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号