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

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

相关文章
|
2月前
|
前端开发
实现Excel文件和其他文件导出为压缩包,并导入
实现Excel文件和其他文件导出为压缩包,并导入
46 1
|
2月前
|
数据格式 UED
记录一次NPOI库导出Excel遇到的小问题解决方案
【11月更文挑战第16天】本文记录了使用 NPOI 库导出 Excel 过程中遇到的三个主要问题及其解决方案:单元格数据格式错误、日期格式不正确以及合并单元格边框缺失。通过自定义单元格样式、设置数据格式和手动添加边框,有效解决了这些问题,提升了导出文件的质量和用户体验。
293 3
|
1月前
|
机器学习/深度学习 前端开发 数据处理
利用Python将Excel快速转换成HTML
本文介绍如何使用Python将Excel文件快速转换成HTML格式,以便在网页上展示或进行进一步的数据处理。通过pandas库,你可以轻松读取Excel文件并将其转换为HTML表格,最后保存为HTML文件。文中提供了详细的代码示例和注意事项,帮助你顺利完成这一任务。
84 0
|
2月前
|
Java API Apache
|
2月前
|
存储 Java API
Java实现导出多个excel表打包到zip文件中,供客户端另存为窗口下载
Java实现导出多个excel表打包到zip文件中,供客户端另存为窗口下载
141 4
|
3月前
|
JavaScript 前端开发 数据处理
Vue导出el-table表格为Excel文件的两种方式
Vue导出el-table表格为Excel文件的两种方式
189 6
图书展示案例html版
图书展示案例html版 效果如下: 示例代码如下: 1 DOCTYPE html> 2 3 4 5 图书商城示例 6 7 8 9 10 11 12 13 ...
2127 0
|
12天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
10天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子