html table 如何导出为excel表格案例分享

简介: html table 如何导出为excel表格案例分享

目录

1、先创建 html 的表格,并指定表格唯一ID:impTable​编辑

2、定义导出表格的函数方法 toExcel()。

应用场景,页面就是普通的 html 。

例如要导出这个示例Table表格。

519f4fe2d60b4de490647aab78ae275b.png


先来看看导出的表格如下:

cf9bfc4ed14443c680ae2e868174ef4a.png


1、先创建 html 的表格,并指定表格唯一ID:impTable

c6e1ed24435a4a81bf11b83de17413b3.png

2、定义导出表格的函数方法 toExcel()。

1)页面添加一个动作按钮。

<div class="searchBt" onclick="toExcel()" style="float: right;margin: 10px 20px;">导出</div>

2) 具体的 JavaScript 代码如下:

    function base64(content) {
                    return window.btoa(unescape(encodeURIComponent(content)));
                }
                var format = function (s, c) {
                    return s.replace(/{(\w+)}/g,
                        function (m, p) {
                            return c[p];
                        });
                }
                //导出html表格为 excel 文件
                function toExcel() {
                    var excelContent = $("#impTable").html();
                    var excelFile = "<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'>";
                    excelFile += "<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>";
                    excelFile += "<body><table width='50%'  border='1'>";
                    excelFile += excelContent;
                    excelFile += "</table></body>";
                    excelFile += "</html>";
                    //定义excel 的sheet名称
                    var ctx = {worksheet: "授信审批表"};
                    var link = "data:application/vnd.ms-excel;base64," + base64(format(excelFile, ctx));
                    var a = document.createElement("a");
                    //定义excel 的文件名称
                    var fileName ="授信审批表_"+$("#skrName").val();
                    a.download = fileName+".xls";
                    a.href = link;
                    a.click();
                }

是不是非常简单好用呢?而且他不需要额外的插件支持,导出的样式也还挺合适的。
对您有用的话,还请动动发财的小手帮小编一键三连吧!你的支持,是我不断输出的最大动力。

相关文章
|
7月前
|
移动开发 JavaScript
(H5查看CAD)网页CAD提取图纸表格到excel
本文介绍如何通过自定义MxCAD插件,在Web端智能识别CAD图纸中的表格,实现自动合并与高效导出至Excel,提升数据提取效率与准确性。内容涵盖区域选择、图形识别、表格结构重建、单元格合并及内容导出等关键技术,适用于工程图纸数据自动化处理场景。
|
Java API Apache
Java编程如何读取Word文档里的Excel表格,并在保存文本内容时保留表格的样式?
【10月更文挑战第29天】Java编程如何读取Word文档里的Excel表格,并在保存文本内容时保留表格的样式?
1070 5
|
12月前
|
JavaScript 前端开发 数据可视化
20.6K star!Excel级交互体验!这款开源Web表格神器绝了!
Handsontable 是一款功能强大的 JavaScript 数据表格组件,提供类 Excel 的交互体验。支持实时协作、数据绑定、公式计算等企业级功能,可轻松集成到 React/Vue/Angular 等主流框架。
2250 11
|
人工智能 数据可视化 前端开发
Probly:开源 AI Excel表格工具,交互式生成数据分析结果与可视化图表
Probly 是一款结合电子表格功能与 Python 数据分析能力的 AI 工具,支持在浏览器中运行 Python 代码,提供交互式电子表格、数据可视化和智能分析建议,适合需要强大数据分析功能又希望操作简便的用户。
1509 2
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
479 12
|
SQL 数据可视化 数据挖掘
想让Excel表格设计更美观?试试这几款好用工具!
Excel表格设计在项目管理和数据分析中至关重要。本文推荐四款辅助工具:板栗看板、Excel自动图表助手、Think-Cell Chart 和 Power BI,分别在任务管理、图表生成、数据可视化等方面表现突出,帮助你设计出更专业、美观的表格。
1512 2
|
JavaScript 前端开发 数据处理
Vue导出el-table表格为Excel文件的两种方式
Vue导出el-table表格为Excel文件的两种方式
1036 6
|
机器学习/深度学习 前端开发 数据处理
利用Python将Excel快速转换成HTML
本文介绍如何使用Python将Excel文件快速转换成HTML格式,以便在网页上展示或进行进一步的数据处理。通过pandas库,你可以轻松读取Excel文件并将其转换为HTML表格,最后保存为HTML文件。文中提供了详细的代码示例和注意事项,帮助你顺利完成这一任务。
703 0
|
9月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
9月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。