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();
                }

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

相关文章
|
存储 数据采集 JSON
你知道吗?html_table可以提取的不止是表格
`html_table` 是一种强大的工具,不仅用于HTML表格解析,还在现代爬虫技术中发挥重要作用。它可以提取、整合、分析和传输多种类型的关键数据。本文从四个方面探讨其功能:关键数据提取(如财经网站的股票信息)、零散信息整合(如电商网站的产品详情)、数据对比分析(如手机性能参数对比)和数据存储与传输(如转换为CSV/JSON格式)。通过Python代码示例,展示了如何利用代理IP、多线程和自定义请求头提高爬虫效率,实现对复杂网页数据的全面抓取和利用。
499 12
你知道吗?html_table可以提取的不止是表格
|
12月前
|
移动开发 JavaScript
(H5查看CAD)网页CAD提取图纸表格到excel
本文介绍如何通过自定义MxCAD插件,在Web端智能识别CAD图纸中的表格,实现自动合并与高效导出至Excel,提升数据提取效率与准确性。内容涵盖区域选择、图形识别、表格结构重建、单元格合并及内容导出等关键技术,适用于工程图纸数据自动化处理场景。
|
JavaScript 前端开发 数据可视化
20.6K star!Excel级交互体验!这款开源Web表格神器绝了!
Handsontable 是一款功能强大的 JavaScript 数据表格组件,提供类 Excel 的交互体验。支持实时协作、数据绑定、公式计算等企业级功能,可轻松集成到 React/Vue/Angular 等主流框架。
3139 11
|
人工智能 数据可视化 前端开发
Probly:开源 AI Excel表格工具,交互式生成数据分析结果与可视化图表
Probly 是一款结合电子表格功能与 Python 数据分析能力的 AI 工具,支持在浏览器中运行 Python 代码,提供交互式电子表格、数据可视化和智能分析建议,适合需要强大数据分析功能又希望操作简便的用户。
1955 2
Postman 可以将文档导出为 HTML/Markdown 吗?
Postman 没有提供直接将你的文档导出为 HTML 或 Markdown 的途径。太糟糕了
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
703 2
利用 html_table 函数轻松获取网页中的表格数据
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
714 12
图书展示案例html版
图书展示案例html版 效果如下: 示例代码如下: 1 DOCTYPE html> 2 3 4 5 图书商城示例 6 7 8 9 10 11 12 13 ...
2297 0
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中