如果在页面上展示了一个数据表格，而用户想把这个表格导出为Excel文件，那么在要求不高的情况下，可以不通过服务器生成表格，而是直接利用JavaScript的Blob和Object URL特性将表格导出。不过，丑话说在前头，这篇随笔中利用了Excel能打开HTML文档的特性，所以导出的表格实际上是一个HTML文档，并且其扩展名只能为.xls，而不能是.xlsx，否则Excel无法打开。（不过确实见过使用JavaScript生成真正Excel文件的方案，这里暂不提及。）

实现代码如下，包含HTML页面和JavaScript脚本：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <meta charset="utf-8" />
  7.     <style>
  8.         /* 此样式仅用于浏览器页面效果，Excel不会分离表格边框，不需要此样式 */
  9.         table {
  10.             border-collapse: collapse;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <!-- 设置border="1"以显示表格框线 -->
  16.     <table border="1">
  17.         <!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->
  18.         <caption>学生成绩表</caption>
  19.         <tr>
  20.             <!-- 可以使用rowspan和colspan来合并单元格 -->
  21.             <th rowspan="2">编号</th>
  22.             <th rowspan="2">学号</th>
  23.             <th rowspan="2">姓名</th>
  24.             <th rowspan="2">性别</th>
  25.             <th rowspan="2">年龄</th>
  26.             <th colspan="3">成绩</th>
  27.         </tr>
  28.         <tr>
  29.             <th>语文</th>
  30.             <th>数学</th>
  31.             <th>英语</th>
  32.         </tr>
  33.         <tr>
  34.             <td>1</td>
  35.             <td>2016001</td>
  36.             <td>张三</td>
  37.             <td>男</td>
  38.             <td>13</td>
  39.             <td>85</td>
  40.             <td>94</td>
  41.             <td>77</td>
  42.         </tr>
  43.         <tr>
  44.             <td>2</td>
  45.             <td>2016002</td>
  46.             <td>李四</td>
  47.             <td>女</td>
  48.             <td>12</td>
  49.             <td>96</td>
  50.             <td>84</td>
  51.             <td>89</td>
  52.         </tr>
  53.     </table>
  54.  
  55.     <a>导出表格</a>
  56.  
  57.     <script>
  58.         // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
  59.         var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
  60.         // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
  61.         var blob = new Blob([html], { type: "application/vnd.ms-excel" });
  62.         var a = document.getElementsByTagName("a")[0];
  63.         // 利用URL.createObjectURL()方法为a元素生成blob URL
  64.         a.href = URL.createObjectURL(blob);
  65.         // 设置文件名
  66.         a.download = "学生成绩表.xls";
  67.     </script>
  68. </body>
  69. </html>

效果如图：

打开下载的文件：

使用开发者工具检查a元素，就能大致明白blob URL的工作原理：

  1. <a href="blob:http://localhost:52347/0ead79dc-1896-4a53-b1f1-dfbafff4e953" download="学生成绩表.xls">导出表格</a>

如果想通过按钮导出文件，可以在按钮的点击事件中创建a元素，配置其属性并触发其点击事件。不过在FireFox中，需要先将创建的a元素放入body中，否则无法下载。

使用JavaScript把页面上的表格导出为Excel文件的更多相关文章

  1. JS 将页面上的表格导出为 Excel 文件

    如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...

  2. 把页面上的图表导出为pdf文件，分享一种请求下载文件的方法

    最近客户提出一个需求,就是把页面上的图表导出为pdf文件. 找了很多资料.终于有了点头绪.最主要是参考了HighCharts的做法.http://www.hcharts.cn/ 实现原理:把页面图表的 ...

  3. 网站开发进阶(二十五)js如何将html表格导出为excel文件

    js如何将html表格导出为excel文件        赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...

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

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

  5. 将页面上的内容导出到Excel

    <asp:Button ID="lkbExport" runat="server" Name="Save" Text="导出 ...

  6. C# 把datagridview控件上的表格输出到excel文件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

  8. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

  9. 将HTML表格导出到EXCEL，兼容Firefox，支持中文

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. vmare虚拟化解决方案

    最近刚入职一家公司!主要是做vmare虚拟化的,虽然跟openstack不太沾边,但现在很多openstack都会兼容vmare程序,最终会如何我拭目以待,今天写这个也是做一个总结. 虚拟化.云计算. ...

  2. JQUERY 特殊字符

    //替换特殊字符 $(this).val($(this).val().replace(/[~'!<>@#$%^&*()-+_=:]/g, ""));

  3. 第10章 使用MySQL数据库

    1.在数据库中插入数据:INSERT语句: 如://插入一整行: insert into customers values (NULL,'-','-','-'), - ; //插入一行中指定的列内容: ...

  4. JAVA上连接ubuntu14.04上的Hbase

    对于新手来说,连接虚拟机上的Hbase有点繁琐,而且网上的配置不太适合初学者,今天我就整理了一下,希望对你们有帮助,第一次发博客. 1.首先去官网下载Hbase的压缩包.我这里用的是1.2.1 htt ...

  5. web前端入门

    看到很多同学在咨询:学习前端该怎么入门啊.推荐一下前端入门书籍啊什么的,作为一个过来人,我想告诉你一些小小技巧,避免走弯路: 1.先敲再学.如果你是零基础,就不要去每个标签,每个属性地去抠,因为里面有 ...

  6. payoneer注册充值提现海外收款费用官方解答

    从事海外贸易的朋友,会发现收款是一大难题.Paypal是老牌支付平台,但费率高昂.其实,Payoneer是新兴的收款工具,非常适合做外贸的卖家使用,提现灵活,费率低,免费注册账号后,可直接获得美国.英 ...

  7. SystemInfo获取设备系统参数

    using UnityEngine; using System.Collections; using System.Collections.Generic; publicclassGameContro ...

  8. php stdClass类的用法

    stdClass是PHP的一个基类,所有的类几乎都继承这个类,所以任何时候任何地方都可以被new,可以让这个变量成为一个object.同时,这个基类又有一个特殊的地方,就是没有方法.凡时用new st ...

  9. asp.net——初识多线程

    1.首先讲解一下什么是线程(该定义是参考线程的百度百科) 线程,有时被称为轻量级进程(Lightweight Process,LWP),是程序执行流的最小单元.一个标准的线程由线程ID,当前指令指针( ...

  10. sass 安装和使用

    1,安装ruby :检查本地是否安装ruby: #ruby -v 2,安装sass: #gem install sass 3,检查是否安装成功:#sass -v 4,.scss文件不能直接被浏览器解析 ...