js将html表格导出为excel文件

举报
SHQ5785 发表于 2022/04/22 08:45:28 2022/04/22
【摘要】 jsp页面数据导出成excel的方法很多，今天介绍一种简单的js方法：// 导出$scope.doExportExcel = function() { var winname = window.open('', '_blank', 'top=10000'); //获得页面上需要导出的数据内容 var strHTML = document.all....

jsp页面数据导出成excel的方法很多，今天介绍一种简单的js方法：

// 导出

$scope.doExportExcel = function() { 
        var winname = window.open('', '_blank', 'top=10000');
 
        //获得页面上需要导出的数据内容
        var strHTML = document.all.content_med_statement.innerHTML; 	// 其中tableExcel是需要导出数据的div的id或者表的id
 
        winname.document.open('text/html', 'replace');
 
        winname.document.writeln(strHTML);
 
        winname.document.execCommand('saveas','','lmapp.xls'); // excel是导出excel的默认名称
 
        winname.close(); 
};

代码解读

  1. window.open('', '_blank', 'top=10000');

用javascript中的window.open()在一个新的窗口打开一个新的空白网页。

window.open(pageURL,name,parameters)

其中：

  • pageURL 为子窗口路径；

  • name 为子窗口句柄；

  • parameters 为窗口参数(各参数用逗号分隔)；

  1. document.all.content_med_statement.innerHTML;

document.all是页面内所有元素的一个集合。如：

document.all(0)表示页面内第一个元素

document.all可以判断浏览器是否是IE

  if(document.all){  

    alert("IE!");  

  }
  1. winname.document.open('text/html', 'replace');

open() 方法可打开一个新文档，并擦除当前文档的内容。

document.open(mimetype,replace)

参数描述

  • mimetype可选。规定正在写的文档的类型。默认值是 "text/html"。

-replace 可选。当此参数设置后，可引起新文档从父文档继承历史条目。

说明

该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。

提示和注释

重要事项：调用 open() 方法打开一个新文档并且用write()方法设置文档内容后，必须记住用close方法关闭文档，并迫使其内容显示出来。

注释：属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法，因为脚本或事件句柄自身也会被覆盖。

4.winname.document.execCommand('saveas','','lmapp.xls');

document.execCommand(sCommand,交互方式, 动态参数])

交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框，动态参数一般为一可用值或属性值。

如果把“.”后面的内容放进去的话就改变文件的格式属性了，从而也就得到了我们所需要的.xls excel格式。

阅读完源码之后,在实际操作过程中还是出现了问题，之间弹出框一闪而过，然后就没有任何效果了。

继续尝试其它方法，发现一个问题:是不是因为自己没有安装微软的excel，因为我知道自己安装的是wps。尝试安装一下微软的excel。

结果发现问题依旧，尝试以下代码:

<HTML>
<HEAD>
<TITLE>将页面中指定表格的数据导入到Excel中</TITLE>
<SCRIPT LANGUAGE="javascript">
<!--
function AutoExcel(){
  var oXL = new ActiveXObject("Excel.Application"); //创建应该对象
  var oWB = oXL.Workbooks.Add();//新建一个Excel工作簿
  var oSheet = oWB.ActiveSheet;//指定要写入内容的工作表为活动工作表
  var table = document.getElementById("data");//指定要写入的数据源的id
  var hang = table.rows.length;//取数据源行数
  var lie = table.rows(0).cells.length;//取数据源列数
 
  // Add table headers going cell by cell.
  for (i=0;i<hang;i++){//在Excel中写行
    for (j=0;j<lie;j++){//在Excel中写列
      //定义格式
      oSheet.Cells(i+1,j+1).NumberFormatLocal = "@";//将单元格的格式定义为文本
      //oSheet.Cells(i+1,j+1).Font.Bold = true;//加粗
      oSheet.Cells(i+1,j+1).Font.Size = 10;//字体大小
      oSheet.Cells(i+1,j+1).value = table.rows(i).cells(j).innerText;//向单元格写入值
    }
  }
  oXL.Visible = true;
  oXL.UserControl = true;
oXL=null
}
//-->
</SCRIPT>
</HEAD>
 
<BODY>
 
<table border="0" width="300" id="data" bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr bgcolor="white">
<td>0001</td>
<td>张三</td>
<td>22</td>
<td>女</td>
</tr>
<tr bgcolor="white">
<td>0002</td>
<td>李四</td>
<td>23</td>
<td>男</td>
</tr>
</table>
<input type="button" name="out_excel" onclick="AutoExcel();" value="导出到excel">
</BODY>
</HTML>

结果发现，其只可以运行在IE浏览器下，估计对IE的版本还会有限制，无语了。结果就是个这吗？难道只有IE才可以吗？更无语的是,下面的数据表格居然无法导出。

<td ng-bind="$index+1" class="ng-binding">1</td>
     <td class="ng-binding">感冒灵颗粒</td>  
    <td><a ui-sref="#" class="ng-binding">TZ11020480</a></td>
     <td class="ng-binding">8</td> 
     <td class="ng-binding">1</td> 
     <td class="ng-binding">2015-11-19 11:06:05</td>                
     <td class="ng-binding">LM2015081700001736</td>
      <td class="ng-binding">[感冒灵颗粒]</td>               
     <td class="ng-binding">U13899990000</td>       
     <td class="ng-binding">处方</td>     
     <td class="ng-binding">中药</td>   
</tr><!-- end ngRepeat: item in querydata --><tr ng-repeat="item in querydata" class="ng-scope">

<td ng-bind="$index+1" class="ng-binding">2</td>
     <td class="ng-binding">感冒灵颗粒</td>  
    <td><a ui-sref="#" class="ng-binding">TZ11020480</a></td>
     <td class="ng-binding">8</td> 
     <td class="ng-binding">1</td> 
     <td class="ng-binding">2015-11-19 11:19:38</td>                
     <td class="ng-binding">LM2015081700001980</td>
      <td class="ng-binding">[感冒灵颗粒]</td>               
     <td class="ng-binding">U13899990000</td>       
     <td class="ng-binding">处方</td>     
     <td class="ng-binding">中药</td>   
</tr><!-- end ngRepeat: item in querydata -->
序号 药品名 药品ID 价格 数量 下单时间 订单ID 订单内容 购药者 处方药 药品种类
继续尝试其它方法: 
function method1(tableid){
var curTbl = document.getElementById(tableid);
var oXL;
try{
oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel 
  }catch(e){
alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel，"+"那么请调整IE的安全级别。\n\n具体操作：\n\n"+"工具 → Internet选项 → 安全 → 自定义级别 → 对没有标记为安全的ActiveX进行初始化和脚本运行 → 启用");
return false;
    }
var oWB = oXL.Workbooks.Add(); //获取workbook对象
var oSheet = oWB.ActiveSheet;//激活当前sheet 
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);    //把表格中的内容移到TextRange中
sel.select(); //全选TextRange中内容 
sel.execCommand("Copy");//复制TextRange中内容 
oSheet.Paste();//粘贴到活动的EXCEL中
oXL.Visible = true; //设置excel可见属性
var fname = oXL.Application.GetSaveAsFilename("将table导出到excel.xls", "Excel Spreadsheets (*.xls), *.xls");
oWB.SaveAs(fname);
oWB.Close();
oXL.Quit();
}

经过对比，发现这个方法最实用。决定对之进行改进。改进的第一步首先还是阅读源码。

var fname = oXL.Application.GetSaveAsFilename("lmapp_.xls", "Excel Spreadsheets (*.xls), *.xls");

Application.GetSaveAsFilename 方法：简单来说就是显示另存为对话框，方便用户输入文件名进行保存。

语法：
expression.GetSaveAsFilename(InitialFilename, FileFilter, FilterIndex, Title, ButtonText)

  • expression 必需。该表达式返回Application类型对象；

  • InitialFilename Variant类型，可选。指定初始的文件名。

  • FileFilter  Variant类型，可选。一个指定文件筛选条件的字符串，格式如：“文本文件, *.txt”。

  • FilterIndex  Variant 类型，可选。指定默认文件筛选条件的索引号，取值范围为 1 到 FileFilter 指定的筛选条件数目之间。

  • Title Variant 类型，可选。指定对话框标题。

  • ButtonText Variant 类型，可选。仅用于 Macintosh。

使用的时候请注意如下几项：

1. 如果省略InitialFilename参数，Microsoft Excel 将活动工作簿的名称作为初始文件名。

2. 如果省略FileFilter参数，则默认参数值为“所有文件 (.),.”

3. 如果省略FilterIndex参数，或者取值大于可用筛选数目，则采用第一个文件筛选条件。

4. 如果省略Title参数，则使用默认标题。

接着又发现一个怪现象:开发的管理系统可以在Chrome、FireFox等浏览器上运行，但是在IE上却没有任何效果。

火狐是最严格执行w3c标准的。你在网页中用到了哪些特殊的html, css, js特性，可以先到w3c网站看看这些特性得到了哪些浏览器的支持。

new ActiveXObject("Excel.Application"); //创建AX对象excel

在FireFox中创建对象时报错。解决方法：IE安全级别降低

ActiveX控制可以调本机的任何资源,可以实现所有可执行文件的功能,但是这个插件,在第一次从网页上载入时,需要从网上下载(自动),并且需要由用户许可后才行.要显示该程序是安全说明,需要向微软申请.

更致命的是:ActiveX 仅限IE浏览器中使用。无解决方案！

但是问题又来了，系统在IE上跑不起来啊！

备注
AngularJS 1.3抛弃了对IE8的支持。AngularJS 1.2将继续支持IE8，但核心团队已经不打算在解决IE8及之前版本的问题上花时间。

而自己恰好使用的就是1.3系列版本,浏览器就是IE8！无语了都，被兼容性搞的头晕目眩。

尝试着使用更高版本的IE浏览器，例如IE9、IE10。

总而言之，使用了angular.js，就仿佛看到了当初W3C标准化组织对web的远景规划：用XML替代html一样。各种操作声明、自定义标签将使DOM操作和应用逻辑解耦，它能大大改善代码的可调性。Angular信奉的是，当组建视图(UI)同时又要写软件逻辑时，声明式的代码会比命令式的代码好得多。

随着mvvm逐渐成熟，现在使用jQuery构建web应用已经显得过时了，而且使用jQuery需要编写更多的代码去控制dom的取值、赋值、绑定事件等，而mvvm从底层实现了对以上操作的支持，让程序员可以从原始的复杂、重复编码中解放出来，让程序员可以将更多的重心放在业务实现、数据交互上去，大大减少了程序员需要编写的代码量。

多年来的web经验告诉我们，编写web应用最难的地方主要在于浏览器的兼容问题，而且更多的兼容问题主要体现在ie上，因此只要能解决ie上的问题，那么这个web应用的其他问题都不再是问题了。

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HTML 前端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入