学习笔记之js中导出表格到excel详解+源码

最新推荐文章于 2024-06-12 13:28:59 发布
最新推荐文章于 2024-06-12 13:28:59 发布
阅读量5.5k 收藏 6
点赞数 7
分类专栏： 前端札记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011009362/article/details/56011236
版权

在系统开发中，经常会遇到要将一个表格数据导出到excel中，刚刚做完，把示例代码共享一下，话不多说直接上代码。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>html 表格导出道</title>  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
   
</head>  
<body>  
  
<div >  
    
</div>  
<div id="myDiv">  
<table id="tableExcel" width="100%" class="table table-hover" >  
    <tr>  
        <td colspan="5" align="center">html 表格导出道Excel</td>  
    </tr>  
    <tr>  
        <td>列标题1</td>  
        <td>列标题2</td>  
        <td>类标题3</td>  
        <td>列标题4</td>  
        <td>列标题5</td>  
    </tr>  
    <tr>  
        <td>aaa</td>  
        <td>bbb</td>  
        <td>ccc</td>  
        <td>ddd</td>  
        <td>eee</td>  
    </tr>  
    <tr>  
        <td>AAA</td>  
        <td>BBB</td>  
        <td>CCC</td>  
        <td>DDD</td>  
        <td>EEE</td>  
    </tr>  
    <tr>  
        <td>FFF</td>  
        <td>GGG</td>  
        <td>HHH</td>  
        <td>III</td>  
        <td>JJJ</td>  
    </tr>  
</table>
<button type="button" class="btn btn-primary center-block" οnclick="method5('tableExcel')">导出Excel</button>  
<!-- <input type="file" class="btn btn-primary center-block" value="请选择输出路径"> -->
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>  
 <script language="JavaScript" type="text/javascript">  
        //第五种方法  
        var idTmr;  
        function  getExplorer() {  
            var explorer = window.navigator.userAgent ;  
            //ie  
            if (explorer.indexOf("MSIE") >= 0) {  
                return 'ie';  
            }  
            //firefox  
            else if (explorer.indexOf("Firefox") >= 0) {  
                return 'Firefox';  
            }  
            //Chrome  
            else if(explorer.indexOf("Chrome") >= 0){  
                return 'Chrome';  
            }  
            //Opera  
            else if(explorer.indexOf("Opera") >= 0){  
                return 'Opera';  
            }  
            //Safari  
            else if(explorer.indexOf("Safari") >= 0){  
                return 'Safari';  
            }  
        }  
        function method5(tableid) {  
            if(getExplorer()=='ie')  
            {  
                var curTbl = document.getElementById(tableid);  
                var oXL = new ActiveXObject("Excel.Application");  
                var oWB = oXL.Workbooks.Add();  
                var xlsheet = oWB.Worksheets(1);  
                var sel = document.body.createTextRange();  
                sel.moveToElementText(curTbl);  
                sel.select();  
                sel.execCommand("Copy");  
                xlsheet.Paste();  
                oXL.Visible = true;  
  
                try {  
                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");  
                } catch (e) {  
                    print("Nested catch caught " + e);  
                } finally {  
                    oWB.SaveAs(fname);  
                    oWB.Close(savechanges = false);  
                    oXL.Quit();  
                    oXL = null;  
                    idTmr = window.setInterval("Cleanup();", 1);  
                }  
  
            }  
            else  
            {  
                tableToExcel(tableid)  
            }  
        }  
        function Cleanup() {  
            window.clearInterval(idTmr);  
            CollectGarbage();  
        }  
        var tableToExcel = (function() {  
            var uri = 'data:application/vnd.ms-excel;base64,',  
                    template = '<html><head><meta charset="UTF-8"></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) {  
                if (!table.nodeType) table = document.getElementById(table)  
                var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}  
                window.location.href = uri + base64(format(template, ctx))  
            }  
        })()  
  
    </script>  
</div>  
</body>  
</html>

但这个示例有两个缺陷，一是导出的表格单元格边框没有样式，二是不能自定义表格名称，所有又进行了改进，以下是改进版本的代码参考。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
	<table id="tableExcel" width="100%" class="table table-hover" >  
    <tr>  
        <td colspan="5" align="center">html 表格导出道Excel</td>  
    </tr>  
    <tr>  
        <td>列标题1</td>  
        <td>列标题2</td>  
        <td>类标题3</td>  
        <td>列标题4</td>  
        <td>列标题5</td>  
    </tr>  
    <tr>  
        <td>aaa</td>  
        <td>bbb</td>  
        <td>ccc</td>  
        <td>ddd</td>  
        <td>eee</td>  
    </tr>  
    <tr>  
        <td>AAA</td>  
        <td>BBB</td>  
        <td>CCC</td>  
        <td>DDD</td>  
        <td>EEE</td>  
    </tr>  
    <tr>  
        <td>FFF</td>  
        <td>GGG</td>  
        <td>HHH</td>  
        <td>III</td>  
        <td>JJJ</td>  
    </tr>  
</table>
	<a id="dlink"  style="display:none;"></a>
<input type="text" name="" value="请输入文件名" class="center-block form-control" style="margin-bottom: 20px; text-align: center" id="submit" οnclick="submt()">	
<input type="button" class="btn btn-primary center-block" οnclick="tableToExcel('tablename', 'name', 'zhangsan.xls')" value="Export to Excel">
</body>
<script>
	var nnn = "";
	function submt(){
		document.getElementById('submit').value="";
	}
	
	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><meta charset="UTF-8"><!--[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) {
            if (!table.nodeType) table = document.getElementById("tableExcel")
            var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }

            document.getElementById("dlink").href = uri + base64(format(template, ctx));
            document.getElementById("dlink").download = document.getElementById('submit').value+'.xls';
            document.getElementById("dlink").click();

        }
    })()
</script>
</html>

最后感谢完成这个功能的同事 微笑。





lanjg521224
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
原生JS实现table数据，转化为EXCEL表格展现（下）
qq_34825758的博客
09-25 2463
input type="button" onclick="JSONToExcelConvertor(JSON_DATA.data,'统计表',JSON_DATA.title)"/> var data = [ {DriversName:"dragon",OrderDtae:"2017-01-01",BusinessNoAmount:"5",DeliverTotalAmount:"10
grid++ report在线报表的使用笔记
03-31
2. 集成到项目：将解压后的源码导入到你的开发环境中，例如Eclipse、IntelliJ IDEA等，根据项目需求进行配置。 3. 数据源设置：Grid++ Report支持多种数据源，包括数据库、XML文件、CSV文件等，你需要在配置文件中...
js将表格数据导出为excel数据
qq_56105902的博客
05-18 281
function ToExcel(){ //要导出的json数据 var jsonData = [ { name:'张三', id:'621' }, { name:'李四', id:'622' }, { name:'王五', id:'623' }, { name:'赵刘', id:'624' } ] //导出前要将json转成table格式...
jxl 操作Excel表格之Workbook
z69183787的专栏
05-05 1821
核心点： Workbook wb =null; WritableWorkbook wwb=null; try{ wb = Workbook.getWorkbook(file); wwb=Workbook.createWorkbook(file,wb); /**    * Creat
【图片和表格数据导出excel】js把表格导出成excel格式，表格内的图片一起导出
最新发布
seeeeeeeeeee的博客
06-12 359
表格样式可以在这里面调整，就是直接加在表格的标签上写样式，tr td 之类的。2，使用方法，组好表头和内容就行，图片会自动识别的。1，js代码，把这个代码复制到一个js文件内。
js实现导出Excel文件
水清梦蓝
11-16 4886
实现表格导出Excel的几种方法
如何使用JavaScript实现纯前端读取和导出excel文件
时清云的博客
11-18 4894
由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。普通版本不支持定义字体、颜色、背景色等，有这个功能需要的可以使用pro版，好像是要收费的，因为官网没看到下载地址。
[信息办公]学校教务管理系统(jsp+servlet+javabean)_school.zip
03-23
《基于jsp+servlet+javabean的学校教务...通过学习和研究这样的系统，开发者不仅可以掌握Java Web开发技术，还能了解到如何设计和实现一个实用的教务管理系统，这对于个人技能提升和实际工作中的项目开发具有重要意义。
notes:我的个人笔记
03-08
【JavaScript 知识详解】 JavaScript，简称JS，是一种广泛应用于Web开发的轻量级、解释型编程语言。它被设计用来增强网页的交互性，使静态网页变得动态且用户友好。JavaScript语法基于ECMAScript规范，是Web浏览器...
三个很好的小米软件源码
09-29
通过研究文件管理器的源码，我们可以学习到如何实现以下功能： - 文件和目录的遍历与显示 - 文件的创建、删除、复制、移动等操作 - 文件类型的识别和图标展示 - 多选操作和批量处理 - FTP/SFTP支持，实现远程...
基于VB的班级管理系统源码.zip
08-27
通过研究这个基于VB的班级管理系统源码，不仅可以掌握VB编程技术，还可以学习到软件工程中的系统设计、数据库管理、用户交互等多个方面的知识。对于初学者来说，这是一个很好的实践案例，能够提升编程能力和问题解决...
excel导出实现代码
07-04
excel导出
js 导出excel（支持大量数据）
11-02
前端导出数据为excel（兼容chrome 和 IE10以上版本），列举了网上常用的两种方法外，新增了可以导出超过5W行数据的方法
导出excel代码
02-08
文件是个压缩包。下载后解压即可。如有问题可以在百度下找找。。
JS导出Excel
07-25
Javascript导出Excel，自动合并单元格、自动列宽、自动获取table页面数据进行合并单元格。列
js导出table表格数据(包括excel,xml,json,csv等格式)
11-23
js导出table表格数据(包括excel,xml,json,csv等格式)
C# 导出导出操作Excel的6种方法实现
爱折腾的博客
11-18 9915
Microsoft.Office.Interop.Excel是一个Microsoft.Office.Interop程序集，它提供一个C# API来编写Excel文件。与Microsoft.Office.Interop.Excel和NPOI相比，EPPlus提供了更好的性能和更容易使用的API。Aspose.Cells是一个商业级的Excel类库，它提供了一组用于处理Excel文件的高级API。与Microsoft.Office.Interop.Excel相比，NPOI提供了更好的性能和更容易使用的API。
前端导出Excel？使用js/ts导出Excel？背景色、指定单元格合并等高定制化？选它——Exceljs
weixin_46086458的博客
02-21 2347
这篇文章我首先是在掘金中发出来的，期间也收获了一些朋友们的支持，同时也是觉得 exceljs 这个工具库在鱼龙混杂的前端excel导出、js导出excel等工具下是非常好的一个。不需要担心是vue还是react还是nodejs环境，它统统能做。特此也在此发布一下，希望能帮到更多的朋友。
js 使用前端导出excel,设置标题和页脚,实现特殊表格需求
热门推荐
你好邱林和的专栏
09-12 1万+
js前端导出excel,网上的例子很多,大部分都是使用如下代码: //统计导出 $scope.statisExport=function(){ toOutPutExcel('statisTable', '证件发放'); }; //导出 var idTmr; function getExplorer() { var explorer = window.n
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值