js如何将html表格导出为excel文件 您所在的位置:网站首页 lmapp js如何将html表格导出为excel文件

js如何将html表格导出为excel文件

2022-12-09 08:44| 来源: 网络整理| 查看: 265

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 为窗口参数(各参数用逗号分隔) 

2.document.all.content_med_statement.innerHTML;

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

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

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

if(document.all){ alert("IE!"); }

3.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。

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

将页面中指定表格的数据导入到Excel中 编号 姓名 年龄 性别 0001 张三 22 女 0002 李四 23 男

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

序号 药品名 药品ID 价格 数量 下单时间 订单ID 订单内容 购药者 处方药 药品种类 1 感冒灵颗粒 TZ11020480 8 1 2015-11-19 11:06:05 LM2015081700001736 [感冒灵颗粒] U13899990000 处方 中药 2 感冒灵颗粒 TZ11020480 8 1 2015-11-19 11:19:38 LM2015081700001980 [感冒灵颗粒] U13899990000 处方 中药

继续尝试其它方法:

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应用的其他问题都不再是问题了。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有