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

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

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <style>

        /* 此样式仅用于浏览器页面效果，Excel不会分离表格边框，不需要此样式 */

        table {

            border-collapse: collapse;

        }

    </style>

</head>

<body>

    <!-- 设置border="1"以显示表格框线 -->

    <table border="1">

        <!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->

        <caption>学生成绩表</caption>

        <tr>

            <!-- 可以使用rowspan和colspan来合并单元格 -->

            <th rowspan="2">编号</th>

            <th rowspan="2">学号</th>

            <th rowspan="2">姓名</th>

            <th rowspan="2">性别</th>

            <th rowspan="2">年龄</th>

            <th colspan="3">成绩</th>

        </tr>

        <tr>

            <th>语文</th>

            <th>数学</th>

            <th>英语</th>

        </tr>

        <tr>

            <td>1</td>

            <td>2016001</td>

            <td>张三</td>

            <td>男</td>

            <td>13</td>

            <td>85</td>

            <td>94</td>

            <td>77</td>

        </tr>

        <tr>

            <td>2</td>

            <td>2016002</td>

            <td>李四</td>

            <td>女</td>

            <td>12</td>

            <td>96</td>

            <td>84</td>

            <td>89</td>

        </tr>

    </table>

    <a>导出表格</a>

    <script>

        // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码

        var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";

        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象

        var blob = new Blob([html], { type: "application/vnd.ms-excel" });

        var a = document.getElementsByTagName("a")[0];

        // 利用URL.createObjectURL()方法为a元素生成blob URL

        a.href = URL.createObjectURL(blob);

        // 设置文件名

        a.download = "学生成绩表.xls";

    </script>

</body>

</html>

效果如图：

打开下载的文件：

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

<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. [ios2]ios系统中各种设置项的url链接

    在代码中调用如下代码:(ps: ios 5.0 以后不可用)NSURL*url=[NSURL URLWithString:@"prefs:root=WIFI"];[[UIAppli ...

  2. java基础练习 10

    import java.util.Scanner; public class Tenth { /*有n个整数,使其前面各数顺序向后移m个位置,最后m个数变成最前面的m个数*/ public stati ...

  3. Docker集群实验环境布署--swarm【6 配置上层Nginx代理，让任意Docker client访问得到高可用的管理API】

    10.40.42.10上,也就是对应的VRRP中的10.40.42.1和2上,配置nginx tcp代理   # cat 4000_manager.venic.com_10.40.100.141-14 ...

  4. 第一百二十六节，JavaScript，XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  5. Ajax beforeSend和complete 方法与防止重复提交

    $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle t ...

  6. find指令

    1.命令格式 find path -options [-print -exec -ok ...] 2.命令功能 查找文件,并作出相应处理 3.命令参数

  7. 希腊字母、拉丁字母、Markdown、拼写与读音中英对照表

    大写 小写 中文名 英文 大写Markdown 小写Markdown 意义 阿尔法 Alpha A \alpha 角度.系数.角加速度.第一个.电离度.转化率 贝塔/毕塔 Beta B \beta 磁 ...

  8. 最近一段OI学习计划

    1.在寒假的时间里尽量吧图论和DP的基础先学一下: 图论:数,二叉树,DFS.BFS遍历,然后最短路径(Floyd.dijkstra.SPFA),然后再最小生成树吧,如果还有时间的话(kruskal( ...

  9. Tiny6410之重定位代码到SDRAM

    在上一章中,将代码重定位到了SRAM中,但是这样的做法作用不大.正确的做法的是将代码重定位到更大的主存中,即DRAM.Tiny6410的DRAM控制寄存器最多只能支持两个同一类型的芯片.每个芯片最多可 ...

  10. UIColor，CGColor，CIColor三者间的区别和联系

    一.UIColor UIColor是UIKit中存储颜色信息的一个重要的类,一个UIColor对象包含了颜色和透明度的值,它的颜色空间已经针对IOS进行了优化.UIColor包含了一些类方法用于创建一 ...