前端HTML 表格导出到excel中（纯前端导出不经过后台）

最新推荐文章于 2024-05-16 18:15:52 发布
最新推荐文章于 2024-05-16 18:15:52 发布
阅读量1.8k 收藏 1
点赞数 
<a id="dlink"  style="display:none;"></a>
<input type="button" onclick="tableToExcel('tables', 'name', 'myfile.xls')" value="Export to Excel">

 

<script type="text/javascript">
        var tableToExcel = (function () {
            var uri = 'data:application/vnd.ms-excel;base64,',
                template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
                base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
                format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };
            return function (table, name, filename) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
    
                document.getElementById("dlink").href = uri + base64(format(template, ctx));
                document.getElementById("dlink").download = filename;
                document.getElementById("dlink").click();
            }
        })()
    </script>

该方法适合用于谷歌 火狐 不能兼容IE

参考链接：https://www.cnblogs.com/anniey/p/7738278.html

Be Patient K
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html table 如何导出为excel表格案例分享
qq_41760419的博客
02-07 720
ASP.NET Core Blazor在razor页面手工绘制Table后如何用js导出到Excel
html页面表格导出excel（原生js浏览器全兼容）
09-10
在网页开发中，有时我们...提供的`js浏览器导出Excel`资源应该包含了一个示例，你可以参考这个示例代码来理解并应用到自己的项目中。这种方法简单易用，适用于各种网页表格导出需求，极大地提高了前端开发的灵活性。
页面html Table表格导出Execl
08-20
将页面中的HtmlTable，导出为Execl 支持合并单位元、合并行等操作。续之前的优化了计算算法，升级了代码。
html table保存成excle,html数据转化到excel表格-如何将html里面的table导出成excel
weixin_42515136的博客
06-10 1226
怎么把html文件转成excel我们打开网络上的一个包含表格内容的页面，点击菜单栏-文件-另存为。弹出窗口选择保存路径，将保存类型选为“htm 或Html格式”。在计算机上新建一个Excel文件并打开，点击菜单栏-数据-导入外部数据-导入数据。找到刚才保存的“Html”单击打开，再单击“导入”。在弹出的“导入数据”窗口中你可以选择“现有工作表”或者“新建工作表”，然后单击确定。如何将Excel中的...
Web前端最全html table 如何导出为excel表格案例分享_html table导出为excel，面试加分项 徐强百度云
最新发布
2401_84435739的博客
05-16 851
1）页面添加一个动作按钮。">导出});//导出html表格为 excel 文件### js基础1)对js的理解？2)请说出以下代码输出的值？3)把以下代码，改写成依次输出0-94)如何区分数组对象，普通对象，函数对象5)面向对象、面向过程6)面向对象的三大基本特性7)XML和JSON的区别？8)Web Worker 和webSocket？9)Javascript垃圾回收方法？10)new操作符具体干了什么呢？11)js延迟加载的方式有哪些？
html表格导出excel有几种方式
热门推荐
终南有客-吾生也有涯，而知也无涯。
05-30 1万+
html表格导出excel有几种方式
HTML Table to Excel
高明的专栏
03-24 351
1.要导出的table <table> <tr> <td>姓名</td> <td>邮箱</td> <td>电话</td> </tr> <tr> <td>高sss</td> <td>xxx@xxx.com.cn</td> <td>xxxx</td> <
html js 页面表格导出示例
qq_36521848的博客
05-12 451
将html中的表格下载下来。
destoon添加数据导出到excel表格中.doc
06-03
在进行二次开发时，有时我们需要将数据库中的数据导出到 Excel 表格中，以便进行数据分析或备份。以下是一个关于如何在 Destoon 系统中实现这一功能的详细步骤。 首先，你需要添加 PHPExcel 库，这是一个专门用于...
前端把html表格生成为excel表格的实例
08-29
在Web开发中，我们经常需要将HTML表格导出为Excel表格，以便于数据的处理和分析。在这篇文章中，我们将学习如何使用jquery.table2excel.js插件将HTML表格生成为Excel表格。 首先，让我们了解一下 html 表格生成 ...
java后台html 转excel
08-25
该技术从国外某网站上整合而来，仅供参考，勉强可以，但仍需完善
vue中后端做Excel导出功能返回数据流前端的处理操作
01-21
因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。 先看下效果图： 页面效果： 点击 导出Excel 调用导出接口成功了： 后台...
html table 转换excel,HTML中的table转为excel
weixin_36441329的博客
06-04 213
pageEncoding="UTF-8"%>Insert title herevar tableToExcel = (function() {var uri = 'data:application/vnd.ms-excel;base64,', template = '{table}', base64 = function(s) { return window.btoa(unescape(en...
vue 通过插件将html表格导出变成excel表
weixin_49205615的博客
09-06 339
【代码】vue 通过插件将html表格导出变成excel表。
将页面任意table内容导出为Excel
YY222222ZZ的博客
04-27 908
主要思路是获取table中行与列封装为二维数组,传入后端解析后保存为Excel。后端就比较简单了,根据前端传来的数组,一行一行的创建单元格。下面是工具类,内容主要都在循环中。
html将table表中的内容导出为excel文件
自能生羽翼，何必仰云梯
02-17 457
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;!--&lt;meta name="renderer" content="webkit" /&gt;     &lt;meta http-equiv="X-UA-Com
数据导出时去掉标签_表格导出功能实践
weixin_39742958的博客
11-29 300
表格导出分为静态导出与动态导出。 - 静态导出是将当前已经渲染的表格项导出为指定的格式，可为.xls或.cvs。这种导出无需后端支撑，完全由前端实现。 - 动态导出是通过将参数传与后端接口，该接口负责生成Blob或物理文件，并在Blob或物理文件路径返回后，由前端进行导出。准备工作无论用哪种方式进行导出，前端都需要准备一下触发器。 我们通常使用a标签的download标签来实现，十分简易。// 然...
html怎么把表格导出到excel,将HTML表格导出到Excel
05-30
可以使用 JavaScript 库 `TableExport` 来实现将 HTML 表格导出到 Excel 的功能。下面是具体的实现步骤： 1. 在 HTML 页面中引入 `TableExport` 库： ```html <script src="https://cdn.bootcdn.net/ajax/libs/TableExport/5.2.0/js/tableexport.min.js"></script> ``` 2. 添加一个按钮，点击该按钮可以触发导出 Excel 的操作： ```html <button id="export-btn">导出 Excel</button> ``` 3. 使用 JavaScript 代码初始化 `TableExport`： ```javascript // 获取要导出的表格 var table = document.getElementById("table-id"); // 初始化 TableExport var exportTable = TableExport(table, { formats: ['xlsx'], // 仅支持导出 xlsx 格式 filename: 'table-export', // 导出的文件名 sheetname: 'Sheet1', // 导出的工作表名 }); // 绑定按钮点击事件 var exportBtn = document.getElementById("export-btn"); exportBtn.addEventListener("click", function() { exportTable.exportToXLSX(); // 导出 Excel }); ``` 4. 完整的 HTML 代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导出表格到 Excel</title> <script src="https://cdn.bootcdn.net/ajax/libs/TableExport/5.2.0/js/tableexport.min.js"></script> </head> <body> <table id="table-id"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> </tr> <tr> <td>王五</td> <td>22</td> <td>男</td> </tr> </tbody> </table> <button id="export-btn">导出 Excel</button> <script> var table = document.getElementById("table-id"); var exportTable = TableExport(table, { formats: ['xlsx'], filename: 'table-export', sheetname: 'Sheet1', }); var exportBtn = document.getElementById("export-btn"); exportBtn.addEventListener("click", function() { exportTable.exportToXLSX(); }); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值