如果在页面上展示了一个数据表格，而用户想把这个表格导出为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. Maven之pom.xml 配置详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  2. Android Tips

    (1).设置图片缓存大小,一般可以设置为内存的1/8 int memoryCache = (int) (Runtime.getRuntime().maxMemory() / 8); (2). (3). ...

  3. windows server 2008系统VPN服务配置

    转自:http://www.softxp.net/article/win2008-vpn/,,仅作自己的笔记用 Windows sever 2008 R2的NPS(network policy ser ...

  4. Intellij 快捷键

    11ctrl+F12  类似于eclipse 的outline  显示出当前类的所有方法. ctrl+H 查看当前类或者方法的集成结构 ctrl+E 查看最近使用的文件 Ctrl+J 自动完成提示 C ...

  5. Codeforces Round #390 (Div. 2)

    时隔一个月重返coding…… 期末复习了一个月也不亏 倒是都过了…… 就是计组61有点亏 复变68也太低了 其他都还好…… 假期做的第一场cf 三道题 还可以…… 最后room第三 standing ...

  6. laravel 安装 Laravel 扩展包

    问题说明 我们经常要往现有的项目中添加扩展包,有时候因为文档的错误引导,如下图来自这个文档 的: composer update 这个命令在我们现在的逻辑中,可能会对项目造成巨大伤害. 因为 comp ...

  7. Java错误提示is not an enclosing class

    今天脑袋晕乎乎的,犯了个低级错误,好半天才反应过来 一直提示:is not an enclosing class 我居然把 RegisterActivity.class 写成了 RegisterAct ...

  8. ubuntu16.04 禁用Guest用户

    .打开终端(快捷键 Ctrl+Alt+T) .编辑50-no-guest.conf文件,按照以下命令编辑, sudo gedit /usr/share/lightdm/lightdm.conf.d/- ...

  9. Chapter 21_1 字符串函数

    接下来开始接触Lua强大的字符串处理能功能——字符串库. 原始的Lua解释器操作字符串的能力很有限,真正强大的能力还是来自字符串库. 它所有的函数都在模块string中.它还为strings设置了一个 ...

  10. 建立tcl文件