js实现html表格导出到excel

【问题】
将jsp中的table导出到excel中。具体实现代码如下:
【实现】
<%@ page language="java"contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<html>
<head>
<scripttype="text/javascript">
function method1(tableid){
    varcurTbl = document.getElementById(tableid);  
    var oXL= newActiveXObject("Excel.Application");   
    var oWB= oXL.Workbooks.Add();
    varoSheet = oWB.ActiveSheet;
    var sel= document.body.createTextRange();
   sel.moveToElementText(curTbl);
   sel.select();
   sel.execCommand("Copy");
   oSheet.Paste();
   oXL.Visible = true;

}
</script>
</head>
<body  onload="method1('tableExcel');">
<table id="tableExcel" width="100%" border="1"cellspacing="0" cellpadding="0">
    <tr>
        <tdcolspan="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>
</body>
</html>
执行这段代码就会出现一个提示框,问你是否保存,可以选择适当的位置进行保存。
但是这种放法存在几个缺陷
缺点(1):
客户端机器上 必须安装了excel,否则会出错。
缺点(2):
必须修改浏览器的默认设置。设置方法为:
工具->Internet选项->安全->自定义级别-> 对没有标记安全级别的ActiveX控件进行初始化  
  设为启用 
鉴于以上缺点,我们不是适合使用该方法,太具有局限性。

第二种发放见下一篇博客,使用一个servlet来完成。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 JavaScript 库 `TableExport` 来实现将 HTML 表格导出Excel 的功能。下面是具体的实现步骤: 1. 在 HTML 页面中引入 `TableExport` 库: ```html <script src="https://cdn.bootcdn.net/ajax/libs/TableExport/5.2.0/js/tableexport.min.js"></script> ``` 2. 添加一个按钮,点击该按钮可以触发导出 Excel 的操作: ```html <button id="export-btn">导出 Excel</button> ``` 3. 使用 JavaScript 代码初始化 `TableExport`: ```javascript // 获取要导出表格 var table = document.getElementById("table-id"); // 初始化 TableExport var exportTable = TableExport(table, { formats: ['xlsx'], // 仅支持导出 xlsx 格式 filename: 'table-export', // 导出的文件名 sheetname: 'Sheet1', // 导出的工作表名 }); // 绑定按钮点击事件 var exportBtn = document.getElementById("export-btn"); exportBtn.addEventListener("click", function() { exportTable.exportToXLSX(); // 导出 Excel }); ``` 4. 完整的 HTML 代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导出表格Excel</title> <script src="https://cdn.bootcdn.net/ajax/libs/TableExport/5.2.0/js/tableexport.min.js"></script> </head> <body> <table id="table-id"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> </tr> <tr> <td>王五</td> <td>22</td> <td>男</td> </tr> </tbody> </table> <button id="export-btn">导出 Excel</button> <script> var table = document.getElementById("table-id"); var exportTable = TableExport(table, { formats: ['xlsx'], filename: 'table-export', sheetname: 'Sheet1', }); var exportBtn = document.getElementById("export-btn"); exportBtn.addEventListener("click", function() { exportTable.exportToXLSX(); }); </script> </body> </html> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值