如果在页面上展示了一个数据表格，而用户想把这个表格导出为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. [ios-必看] WWDC 2013 Session笔记 - iOS7中的多任务【转】

    感谢:http://onevcat.com/2013/08/ios7-background-multitask/ http://www.objc.io/issue-5/multitasking.htm ...

  2. 第六届全球游戏大会（ GMGC 北京 2017 ）有哪些看点？

    全球游戏大会作为亚太地区极具影响力的全球性游戏行业盛会,本次第六届全球游戏大会( GMGC 北京 2017 )将力邀全球50个国家.500多位业界领袖.5000多家企业.50000多位业界精英参展参会 ...

  3. Colorful Image Colorization 的环境配置

    原文链接:https://github.com/richzhang/colorization 步骤基本是按照Installation里的说明 1.安装依赖库 1.1Python相关库 Python l ...

  4. CentOS+OpenCV图像的读入、显示

    以管理员身份运行su root输入密码 定位到自己的桌面目录 gedit 1.cpp 编辑内容 #include<opencv2/opencv.hpp>using namespace cv ...

  5. 简单的HTML注册界面

    <html><head><title>我的第一个HTML页面</title></head><body><center> ...

  6. CoreJavaE10V1P3.2 第3章 Java的基本编程结构－3.2 注释

    3.2 注释 1. //形式注释 System.out.println("We will not use 'Hello, World!'"); // is this too cut ...

  7. ECMAScript6之Array类型的扩展

    数组的扩展 Array.of() 将一组值转换成数组 Array.of(1,2,3,4,5); //[1,2,3,4,5] Array.from() 可将类似数组的对象或者可便利的对象转换成数组,比如 ...

  8. python 基础篇第一篇

    本节内容 1.python介绍 2.发展史 3.python2和python3 4.安装 5.简单程序,hello world程序 6.变量 7.用户输入 8.模块初识 9..pyc是什么? 10.数 ...

  9. Linux Tomcat 自启动

    使用chkconfig命令 修改tomcat/bin/startup.sh,在开头的地方添加如下内容 #chkconfig: #description:tomcat auto start #proce ...

  10. Django之模型管理器filter处理问题

    今天上班第一天,恭祝所有朋友新年快乐!! 最近在github上发现一个还不错的基于Django的开源博客项目,不过也许是版本原因,其中代码存在着些许问题,今天主要记录下其中的模型处理方法的部分. 这段 ...