如果在页面上展示了一个表格，想把这个表格导出为Excel文件，那么在要求不高的情况下，可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出。不过，这就是利用了 Excel 能打开 HTML 文档的特性，所以导出的表格实际上是一个 HTML 文档，并且其扩展名只能为 .xls，而不能是 .xlsx，否则Excel无法打开。（有使用JavaScript生成真正Excel文件的方案，以后再研究。）

实例：

<!DOCTYPE html>

<html>

<head>

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

    <title>table</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);

    // 设置文件名，目前只有Chrome和FireFox支持此属性

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

</script>

</body>

</html>

页面效果：

点击“导出表格”：

         

备注：在FireFox中，需要先将创建的a元素放入body中，否则无法下载。

JS 将页面上的表格导出为 Excel 文件的更多相关文章

  1. 使用JavaScript把页面上的表格导出为Excel文件

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

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

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

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

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

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

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

  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. JS 在页面上直接将json数据导出到excel，支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

    JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox <html> <head> </h ...

  8. 导出jqgrid表格数据为EXCEL文件，通过tableExport.js插件。

    今天公司项目需要做个导出功能,将jqgrid查询出的数据导出为EXCEL表格文件,期间遇到两个问题: 1.导出报错 uncaught exception: INVALID_CHARACTER_ERR: ...

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

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

随机推荐

  1. hive四种排序

    order by order by 会对输入做全局排序,因此只有一个reducer(多个reducer无法保证全局有序)只有一个reducer,会导致当输入规模较大时,需要较长的计算时间. set h ...

  2. djangoNotes

    学员管理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. “key_share”和"pre_shared_key" 的区别

    越是基本的问题或者概念越是难解释或者讲清楚,论文写到现在真的好无助的样子 . 在LTS协议中牵扯到握手的认证和秘钥建立的时候,这连个概念经常混淆,TLS1.3版本协议为参照,区别这两个概念 1.概念的 ...

  4. mybatis遍历map

    mytabis是可以遍历map的,试过很多其他的方法都不行,最终使用如下方法是可以的: 1.mapper.java如下(注意要加@Param注解,否则不行,我就在这里折腾了不少时间): int upd ...

  5. java基础（4）---引用数据类型（数组、字符串、集合）

    一.数组 格式: int[] nums; 1. 数据类型[] 数组名称; 2. 数据类型 数组名称[]; (不太推荐)  动态初始化: new int[4] 数据类型[] 数组名称 = new 数据类 ...

  6. 改进Bert----spanBERT

    SpanBert:对 Bert 预训练的一次深度探索 SpanBERT: Improving Pre-training by Representing and Predicting Spans 解读S ...

  7. jmap与jstat工具实战分析

    在上一节[https://www.cnblogs.com/webor2006/p/10662363.html]最后其实是抛出了infoq关于元空间介绍的文章中所涉及到JDK自带的一些工具的使用,这次咱 ...

  8. css定位篇

    1.浮动的特性: 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有“字围”效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中:margin:0 a ...

  9. _MyBatis3-topic06.07.08.09_ 全局配置文件_引入dtd约束(xml提示)/ 引入properties引用/ 配置驼峰命名自动匹配 /typeAliases起别名.批量起别名

    MyBatis3 的全局配置文件 : Setting -官方文档 笔记要点 出错分析 [Intellij idea配置外部DTD文件] 设置步骤: (同Eclipse中的Catalog设置 ) Fil ...

  10. PL/SQL 子查询

    一.概述 在一个SQL语句中嵌套另一个SQL语句成为子查询.包括单行子查询,多行子查询,多列子查询. 注意,当在DDL语句中引用子查询时,可以带有Order By子句:但是当在where子句.Set子 ...