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

       赠人玫瑰,手留余香。若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!

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。

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

<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才可以吗?更无语的是,下面的数据表格居然无法导出。

<table class="table" id="body_med_statement" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
 <tbody><tr>
 <th>序号</th>
 <th>药品名</th>
 <th>药品ID</th>
 <th>价格</th>
        <th>数量</th>
        <th>下单时间</th>
 <th>订单ID</th>
 <th>订单内容</th>
 <th>购药者</th>
        <th>处方药</th>
 <th>药品种类</th>
         </tr>
    <!-- ngRepeat: item in querydata --><tr ng-repeat="item in querydata" class="ng-scope">

    <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 -->
</tbody>
</table>

继续尝试其它方法:

</pre><pre name="code" class="javascript">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应用的其他问题都不再是问题了。

参考文献:

http://www.storagelab.org.cn/zhangdi/2013/01/08/angular-js%EF%BC%8Cie789%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E5%A4%84%E7%90%86/

http://www.oschina.net/translate/angularjs-ie-compatibility

http://www.cnblogs.com/ahl5esoft/p/3872597.html

网站开发进阶(二十五)js如何将html表格导出为excel文件的更多相关文章

  1. 网站开发进阶(二十六)js刷新页面方法大全

    js刷新页面方法大全 在项目开发过程中,需要实现刷新页面.经过学习,发现下面这条语句就可以轻松实现. location.reload(); // 刷新页面 有关刷新页面的其它方法,具体学习内容如下,有 ...

  2. 网站开发进阶(三十一)js如何将html表格导出为excel文件(后记)

    js如何将html表格导出为excel文件(后记) 前言 项目前期做了个导出Excel表格的功能,但是经过测试发现只有在IE上才可以正确实现,在Chrome等浏览器中无法实现导出效果.经过上网搜索,尝 ...

  3. 网站开发进阶(二十)JS中window.alert()与alert()的区别

    JS中window.alert()与alert()的区别 前言 alert与window.alert没什么区别,如果有人觉得有区别,那就来解释一下:所有以window.开始的语句,都可以直接把wind ...

  4. 网站开发进阶(三十五)JSP页面中的pageEncoding和contentType两种属性

    JSP页面中的pageEncoding和contentType两种属性 本文介绍了在JSP页面中经常用的两种属性,分别是pageEncoding和contentType,希望对你有帮助,一起来看. 关 ...

  5. 网站开发进阶(二十九)HTML特殊转义字符

    HTML特殊转义字符 参考文献 http://tool.oschina.net/commons?type=2 美文美图

  6. 网站开发进阶(二十八)初探localStorage

    初探localStorage       注: localStorage经典项目应用案例 HTML5中提供了localStorage对象可以将数据长期保存在客户端,直到人为清除. localStora ...

  7. 网站开发进阶(二十四)HTML颜色代码表

    HTML颜色代码表 设置背景色:style='background-color:red' 设置字体颜色:style='color:red' 生活在于学习,知识在于积累.

  8. 网站开发进阶(二十二)HTML UI知识汇总(更新中...)

    HTML知识汇总(更新中...) 1.<iframe> 标签 浏览器支持 所有浏览器都支持 <iframe> 标签. 定义和用法 iframe 元素会创建包含另外一个文档的内联 ...

  9. 网站开发进阶(四十二)巧用clear:both

    网站开发进阶(四十二)巧用clear:both 前言 我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况,明明布局正确,但是整个画面却混乱起来了,有时候在IE6下看的很正 ...

随机推荐

  1. Android中典型的ROOT原理(5)

    ROOT的作用 Customization 用户的个人定制,如删除一些预安装,定制开机动画等. 特权操作 所有需要特权操作的基本都是要通过ROOT,这也是ROOT的初衷. ROOT的第一步:寻找漏洞并 ...

  2. Netty 4源码解析:服务端启动

    Netty 4源码解析:服务端启动 1.基础知识 1.1 Netty 4示例 因为Netty 5还处于测试版,所以选择了目前比较稳定的Netty 4作为学习对象.而且5.0的变化也不像4.0这么大,好 ...

  3. chrome浏览器不兼容jQuery Mobile问题解决

    最近在学习jQuery Mobile.第一次运行例子的时候发现chrome总是等待,查看后台报错.错误如下所示: 最后在stackoverflow上找到一个解决方案:将以下代码放在 jquery.mo ...

  4. ASP.NET实现在线浏览Word文档另一种解决方案(Word转PDF)

    ASP.NET实现在线浏览Word文档另一种解决方案(Word转PDF)      上述博文里提到的在线浏览pdf的方案不错,但word转pdf的那个dll只支持doc不支持docx,附上最新的下载链 ...

  5. Python实现八大排序算法(转载)+ 桶排序(原创)

    插入排序 核心思想 代码实现 希尔排序 核心思想 代码实现 冒泡排序 核心思想 代码实现 快速排序 核心思想 代码实现 直接选择排序 核心思想 代码实现 堆排序 核心思想 代码实现 归并排序 核心思想 ...

  6. 给pdf文件添加防伪水印logo(附工程源码下载)

    pdf添加水印logo这种需求场景确实很少,有些时候一些销售单据生成pdf添加一个水印logo,做一个简单的防伪效果,虽然实际上并没有太大作用,但是产品经理说要,巴拉巴拉--省略一万字. 下面将源码分 ...

  7. Android简易实战教程--第三十三话《 AsyncTask异步倒计时》

    本篇小案例,完成一个倒计时.方式选择AsyncTask.代码贴在下面: 布局文件soeasy: <LinearLayout xmlns:android="http://schemas. ...

  8. [Python]查看python路径以及安装包的路径

    特别是linux系统,装了多个python,有时候找不到python的绝对路径,有时候装了个django,又找不到django安装到哪里了..当然查看的方法有很多种,这里列出几种,供没有经验的人参考下 ...

  9. 有N个数,组成的字符串,如012345,求出字串和取MOD3==0的子串,如012 12 123 45。

    #include <iostream> using namespace std; int getSum(string str, int begin, int len) { int sum ...

  10. SQL基本函数

    字符型函数 函数名称 描述 LOWER 将特定的字符串转化为小写,只影响字母字符串. UPPER 将整个字符串转换成大写,只影响字母字符串. INITCAP 将字符串中每一个单词的第一个字母转换为大写 ...