如果在页面上展示了一个数据表格，而用户想把这个表格导出为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. bzoj1180，2843

    1180: [CROATIAN2009]OTOCI Time Limit: 50 Sec  Memory Limit: 162 MBSubmit: 967  Solved: 597[Submit][S ...

  2. java基础练习 9

    import java.util.Scanner; public class Ninth { /*取一个整数a从右端开始的4-7位.*/ public static void main(String[ ...

  3. Caffe安装过程错误处理方法

    1. 错误1: fatal error: caffe/proto/caffe.pb.h: No such file or directory 解决方法: You need to generate ca ...

  4. 【.NET-EF】Entity Framework学习笔记1 - VS2013没有EF的解决方法

    解决方法:我本来也没有,百度了一下,在C:\ProgramData\Package Cache\{08AEF86A-1956-4846-B906-B01350E96E30}v12.0.20912.0\ ...

  5. mysql java写入时间少14小时

    查看时区: mysql> show variables like '%time_zone%'; +------------------+--------+ | Variable_name | V ...

  6. minSdkVersion与targetSdkVersion

    targetSdkVersion是Android提供向前兼容的主要依据,在应用的targetSdkVersion没有更新之前,系统不会应用最新的行为变化 比如设置了app的targetSdkVersi ...

  7. hdu 3842 Machine Works(cdq分治维护凸壳)

    题目链接:hdu 3842 Machine Works 详细题解: HDU 3842 Machine Works cdq分治 斜率优化 细节比较多,好好体会一下. 在维护斜率的时候要考虑x1与x2是否 ...

  8. IntelliJ Idea 14 安装 Golang 插件 google-go-lang-idea-plugin 的方法

    IDEA 的编辑器都很强悍,所以现在学Go 也想用他啊,无奈这个插件搞了好久,整理了下流程记录下 1. 当然是下载 IDEA 编辑器了 http://www.jetbrains.com/idea/do ...

  9. AngularJS中如何对Controller与Service进行分层设计与编码

    初学者的Controller 在我们当接触NG后,如需要通过访问远程的API获取一系列的数据进行显示,通常我的Controller代码会写成下面的样子: angular.module('demo') ...

  10. NEUQ1038: 谭浩强C语言(第三版)习题4.8

    之前没做对的一道题,今天集中清理一下. //------------------- 很水的题,主要是 %.2lf 不能四舍五入,需要仅保留两位小数,用了丑陋的强制类型转换... //--------- ...