网站开发进阶(二十五)js如何将html表格导出为excel文件_js如何把html文件改为excel文件流格式

最新推荐文章于 2024-06-27 17:44:26 发布

2401_84411822

最新推荐文章于 2024-06-27 17:44:26 发布

阅读量851

点赞数 20

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84411822/article/details/138638485

版权

程序员专栏收录该内容

213 篇文章 0 订阅

订阅专栏

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

疯狂编程
学习效果可视化
写博客
阅读优秀代码
心态调整

源码

// 导出
$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>     
#### 算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/c582a01373152bb4cd38bc6ad5cc8027.png)



**写在最后**

**最后，对所以做Java的朋友提几点建议，也是我的个人心得：**

1.  疯狂编程

2.  学习效果可视化

3.  写博客
4.  阅读优秀代码
5.  心态调整