世上最完美的用JavaScript将table导出成一个Excel文件（兼容所有浏览器）

最新推荐文章于 2021-08-26 21:06:44 发布
最新推荐文章于 2021-08-26 21:06:44 发布
阅读量965 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19306197/article/details/52102624
版权

项目一个功能需要将table中的数据导出成一个Excel文件。在百度搜索上，大多是用ActiveX去做，可这个只能在ie浏览器上用，而且还要更改浏览器设置，这个方法明显不好用。

我经过多次搜索和研究，千辛万苦，终于找到一个方法，能兼容所有浏览器。代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>EB页面导出为EXCEL文档的方法</title>
<script>  
//打印pdf文件
 function myprint(){
 var global_Html = document.body.innerHTML;       

      document.body.innerHTML = document.getElementById('tableExcel').innerHTML;         　　　　　　　　　　　　　　     
       window.print();

        window.setTimeout(function () {

            document.body.innerHTML = global_Html;       

}, 1500); 
}
</script>
<script type="text/javascript" language="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 method1(tableid) {//整个表格拷贝到EXCEL中
            if(getExplorer()=='ie')
            {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");
                 
                //创建AX对象excel
                var oWB = oXL.Workbooks.Add();
                //获取workbook对象
                var xlsheet = oWB.Worksheets(1);
                //激活当前sheet
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                //把表格中的内容移到TextRange中
                sel.select();
                //全选TextRange中内容
                sel.execCommand("Copy");
                //复制TextRange中内容 
                xlsheet.Paste();
                //粘贴到活动的EXCEL中      
                oXL.Visible = true;
                //设置excel可见属性
 
                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);
                    //xls.visible = false;
                    oXL.Quit();
                    oXL = null;
                    //结束excel进程，退出完成
                    //window.setInterval("Cleanup();",1);
                    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 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) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
                window.location.href = uri + base64(format(template, ctx))
              }
            })()
</script>
</head>

<body>
<div id="tableExcel">
  <table id="test" width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="5" align="center"><font size="6"><b>WEB页面导出为EXCEL文档的方法</b> </font></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>
    <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 colspan="5">FFFGGGHHHIIIJJJ </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>DDD </td>
      <td>EEE </td>
    </tr>
    <tr>
      <td>FFF </td>
      <td>GGG </td>
      <td>III </td>
      <td>JJJ </td>
    </tr>
  </table>
</div>
<input type="button" value="另存为 Excel" onClick="javascript:method1('test')">
<input type="button" value="另存为pdf" onClick="myprint()"/>
</body>
</html>


谢泽豪
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js浏览器导出Excel[兼容所有浏览器]
09-14
本zip包主要是为了到处html页面中的table表格而设计的demo。可以参考文件里的Hello.html和testdao.html两个，经过本人测试都可以导出Excel。IE导出的效果反而比Google浏览器的好看。IE测试版本11.1715.14393.0。
jquery_table2excel_demo
07-14
`jQuery Table2Excel`的工作原理是将HTML表格转换成一个XML格式的数据，然后利用浏览器的`data:` URL和`MIME-Type`创建一个临时的Excel文件，最后触发浏览器的下载行为。由于这是一个客户端的解决方案，所以它无需...
html中Table导出Excel（能够兼容IE8）
WY001的博客
04-06 2283
需要一个js文件 table2excel.js <table id="aaa" class="datatable" > <thead> 部分代码略。。。 导出的js事件 <script language="JavaScript" type="text/javascript"> //jQ...
JS 导出table数据到Excel 前4种方法只支持IE，最后一个支持主流浏览
测试
12-10 191
<html><head></head><body> html 表格导出 <p></p> <p><span style="font-size: 1px;"> //第一种方法 </span></p> <p><span style="fo...
Excel 文件导出，兼容IE（web前后台导出方法）
promote的博客
08-26 1381
Excel 文件导出 前台导出 前台导出是指使用前台页面的数据导出到本地文件 XML文件和Excel文件之间可以相互转换，因此可将 XML 数据从 Web 服务中导入到 Excel 工作表中。 使用隐藏的Table存放需要导出的数据，构建模板文件（一个html格式文件，可以设置一些属性和格式），将table中的数据添加到模板中，通过base64加密，使用 data:application/vnd.ms-excel;base64 将数据流传送到本地，完成导出功能。 前台导出是将静态页面（包含数据的tab
使用JavaScript将Html table导出Excel
热门推荐
小笼包不是包的博客
01-17 2万+
Excel导出的话，因为纯前端导出，IE有工具会提示安全问题，但是仅限IE。谁叫Office是IE的兄弟呢。 一、纯前端（原理是利用Excel可以打开HTML格式，改了后缀。不是真正意义上的Excel文件） 1、纯JS（兼容性有问题，谷歌可用） 介绍：基本没有配置，不能导出表格的格式。具体样式可以去工具包里面看修改，兼容性有毛病。仅供参考，不建议使用。 一行代码即可：ExcelUtils.
jQuery表格导出转为excel表格插件.zip
11-17
"jQuery表格导出转为Excel表格插件"是一个便捷的工具，它允许用户将网页上的表格数据导出为Excel格式的文件，便于进一步的数据分析和存储。通过这个插件，开发者可以为用户提供一个简单的按钮或链接，点击后即可下载...
excel导出源码
11-25
在JavaScript中，你可以将各种类型的数据（如字符串、数组缓冲区等）组合成一个Blob，为文件保存或传输提供便利。例如，将JSON数据转换为Blob，再通过FileSaver.js保存为.txt文件。 3. **tableExport.js**: 这是一...
WEB页面导出为EXCEL,word文档的方法.rar
05-21
总结来说，Web页面导出Excel和Word文档涉及的主要知识点包括JavaScript编程、DOM操作、特定库的使用（如`xlsx`和`docx`）、数据格式转换和文件下载机制。理解并掌握这些知识，你就可以在自己的Web应用中实现灵活的...
JAVA上百实例源码以及开源项目
01-03
2个目标文件，FTP的目标是：（1）提高文件的共享性（计算机程序和/或数据），（2）鼓励间接地（通过程序）使用远程计算机，（3）保护用户因主机之间的文件存储系统导致的变化，（4）为了可靠和高效地传输，虽然用户...
Html导出Excel文件(升级版兼容所有浏览器)
02-27
JavaScript Html导出Excel文件(兼容所有浏览器)，现网络上首个JavaScript Html代码块导出Excel文件，兼容全部浏览器导出Excel文件的Demo，可设置Excel文件名
js前端导出table到excel
03-07
这是一个前端通过js导出页面的table生成并下载excel的demo
js操作table导出excel
05-27
资源提供js操作html、table导出生成excel文件，代码简介易懂
IE下将table导出成excel
12-21
html导出excel 下载直接使用以下方法即可导出 method1('tableid')" method2('tableid')" method3('tableid')"
JavaScript HTML内容导出Excel兼容所有浏览器
02-25
IE浏览器下是将内容复制到Excel，需用户手动保存Excel文档 非IE浏览器可直接导出Excel文件
SheetJS将table转为Excel
vvull的博客
07-21 742
看看我 table_to_book 和 table_to_sheet工具函数获取DOM的TABLE元素，并且通过子节点进行迭代。 var workbook = XLSX.utils.table_to_book(document.getElementById('tableau')); /* DO SOMETHING WITH workbook HERE */ 一个网页里面的多张表可以被转换成单...
前端js实现打印（导出）excel表格
尽力漂亮的博客
10-10 1019
https://www.jianshu.com/p/9739eb60a472
导出前端的table为excel，兼容IE
u012612062的博客
06-05 342
//base64转码 var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); }; //替换table数据和worksheet名字 var format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }); } fun.
js将element的table表导出为excel
qq_40816649的博客
06-22 562
直接上代码 <el-table :data="item.data" cell-class-name="itemTd" row-class-name="itemRow" ...
如何才能将vue项目中的elementui的table组件导出成excel文件
最新发布
07-16
要将Vue项目中Element UI的Table组件导出为Excel文件，可以按照以下步骤进行操作： 1. 首先，确保你的Vue项目中已经安装了Element UI和xlsx插件。如果还没有安装，可以使用以下命令进行安装： ``` npm install element-ui xlsx ``` 2. 在需要导出Table组件的Vue组件中，导入所需的模块和样式： ```javascript import XLSX from 'xlsx'; import 'xlsx/dist/xlsx.css'; import { Table } from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; ``` 3. 在模板中使用Element UI的Table组件，并绑定数据： ```html <template> <div> <el-table :data="tableData" ref="table"> <!-- 表格内容 --> </el-table> <el-button type="primary" @click="exportTable">导出表格</el-button> </div> </template> ``` 4. 在Vue组件的`exportTable`方法中，使用XLSX库将Table组件的数据导出为Excel文件： ```javascript export default { data() { return { tableData: [ // 表格数据 ], }; }, methods: { exportTable() { const tableData = this.$refs.table.store.states.data; // 获取Table组件数据 const worksheet = XLSX.utils.json_to_sheet(tableData); // 将数据转换为worksheet对象 const workbook = XLSX.utils.book_new(); // 创建工作簿对象 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 将worksheet添加到工作簿 const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' }); // 将工作簿转换为二进制数据 function s2ab(s) { // 字符串转ArrayBuffer const buf = new ArrayBuffer(s.length); const view = new Uint8Array(buf); for (let i = 0; i < s.length; i++) { view[i] = s.charCodeAt(i) & 0xff; } return buf; } const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' }); // 创建Blob对象 const downloadLink = document.createElement('a'); // 创建下载链接 downloadLink.href = URL.createObjectURL(blob); downloadLink.download = 'table.xlsx'; // 下载文件名 document.body.appendChild(downloadLink); // 添加下载链接到页面 downloadLink.click(); // 模拟点击下载 setTimeout(() => { document.body.removeChild(downloadLink); // 下载完成后移除下载链接 URL.revokeObjectURL(downloadLink.href); // 释放URL对象 }, 200); }, }, }; ``` 在这个示例中，`exportTable`方法使用`$refs`来获取Table组件的数据，并使用XLSX库将数据转换为Excel文件。然后，创建一个下载链接并模拟点击下载。最后，移除下载链接和释放URL对象。 请注意，上述示例中的`tableData`和`s2ab`函数需要根据你的实际情况进行调整。`tableData`应该是你要导出的Table组件的数据，而`s2ab`函数是一个将字符串转换成ArrayBuffer的辅助函数。 使用以上步骤，你就可以将Element UI的Table组件导出为Excel文件了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值