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 文件。

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • ASP.NET 页面中的 ValidateRequest属性

    ASP.NET 页面中的 ValidateRequest属性ValidateRequest指示是否应发生请求验证。如果为true,请求验证将根据具有潜在危险的值的硬编码列表检查所有输入数据。如果出现匹配情况,将引发HttpRequestValidationException异常。默认值为true。该功能在计算机配置文件(Machine.config)中启用。可以在应用程序配置文件(Web.config)中或在页上将该属性设置为false来禁用该功能。注意:该功能有助于减少对简单页或ASP.NET应用程序进行跨站点脚本攻击的

    2025年7月17日
    6
  • 如何使用docker部署c/c++程序

    如何使用docker部署c/c++程序版权声明 本文为博主原创文章 未经博主允许不得转载 Docker 介绍 Docker 是一个开源的容器引擎 它有助于更快地交付产品 Docker 可将应用程序和基础设施层隔离 并且将基础设施当作程序一样进行管理 使用 Docker 可以更快地打包 测试以及部署应用程序 并可以缩短从编程到部署运行代码的周期 docker 部署 c c 程序关于 docker 的使用网上有很多的教程但是很少有介绍如

    2025年11月30日
    6
  • wake_lock_timeout的用法[通俗易懂]

    wake_lock_timeout的用法

    2022年1月22日
    48
  • Java数组(Array)

    Java数组(Array)数组(Array),是多个相同类型数据一定顺序排列的集合,并使用一个名字命名,并通过编号的方式对这些数据进行统一管理。数组相关的概念:数组名元素角标、下标、索引数组的长度:元素的个数数组的特点:数组是按序排列的数组属于引用数据类型的变量。数组的元素,既可以是基本数据类型,也可以是引用数据类型创建数组对象会在内存中开辟一整块连续的空间数组的长度一旦确定,就不能修改。数组…

    2022年7月8日
    25
  • 个人防火墙软件排名「建议收藏」

    个人防火墙软件排名「建议收藏」1.Look’n’stopLook’n’Stop被誉为世界顶级防火墙!与同类产品相比具有最为突出的强劲功能以及与众不同的特点,不仅功能评测在知名防火墙中是最强的!而且软件大小只有区区600多k十分小巧,占内存非常小,可以监控dll,更具强大的御防******能力!下载Look’n’stop:[url]http://3800cc.com/Soft/aqfh/2129.h…

    2022年5月5日
    107
  • SQL 清空表数据的方法

    SQL 清空表数据的方法truncatetabletablenamedeletefromtablenamedelete方法最大的问题,当有标志字段时就有问题一般建議盡可能使用delete去刪除表的字段,它具有選擇性刪除的作用,所以常常deletefromtablenamewhere條件delete和truncate作用其實是一樣的,隻是truncate后面不跟where條件句,它的作用是刪除表中所有的行(記錄)兩者最大的區別就是delete是寫日誌文件的,而truncate則不寫日誌直接刪除

    2022年6月5日
    60

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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