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

翻译 2018年04月17日 17:06:13

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

导出Excel—后台数据操作必备技能java实战

后台进行数据的管理以及打印很多时候都需要导出excel,例如学生,会员,客户的管理,web网站或者微商城的订单管理,实现导出excel将会使我们的后台管理非常的流畅和方便
  • 2017年05月01日 23:27

js导出tables为excel

{% load i18n %} 播放次数 {% trans 'Date' %} {%...
  • qq_18863573
  • qq_18863573
  • 2017-03-31 15:45:18
  • 1166

javascript 将表格导出成Excel

javascript 将表格导出成Excel浏览器兼容性 判断浏览器类型 “` function getExplorer() { var explorer = window....
  • yy493004893
  • yy493004893
  • 2017-08-09 10:33:41
  • 195

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

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

前端:页面表格导出Excel

Excel导出的话,因为纯前端导出,IE有工具会提示安全问题,但是仅限IE。谁叫Office是IE的兄弟呢。 一、纯前端(原理是利用Excel可以打开HTML格式,改了后缀。不是真正意义上的Excel...
  • xiaolongbaobushibao
  • xiaolongbaobushibao
  • 2017-01-17 15:48:42
  • 12533

将页面的列表数据导出到excel文件中

1、用的是springMVC的模式 2、在service接口层 //根据页面传过来的id在库里查询 List selectByPrimaryKeydhh(long ids);      在...
  • donghua19900508
  • donghua19900508
  • 2017-12-12 17:21:28
  • 199

html页面表格导出到excel总结

最近一个项目需要把报表的表格导入excel,在网上找了一些方法,比较研究了一下,记在这里,备忘。 表格例子如下:table id="tableExcel" width="100%" border="1...
  • xjbx
  • xjbx
  • 2008-06-23 14:38:00
  • 12879

将Html中表格数据导出为Excel

1、自定义JavaScript函数实现 input type="button" name="out_excel" onClick="AutomateExcel();" value="导出到e...
  • zhaodecang
  • zhaodecang
  • 2017-11-23 22:37:52
  • 554

JavaScript将页面表格导出为Excel

导出Excel var idTmr = ""; function killExcelProcess(appExcel_){ appExcel_.Quit(); appE...
  • wbsoso
  • wbsoso
  • 2013-12-26 17:38:33
  • 362

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

js如何将html表格导出为excel文件       jsp页面数据导出成excel的方法很多,今天介绍一种简单的js方法:   源码 // 导出 $scope.doExportExcel = fu...
  • sunhuaqiang1
  • sunhuaqiang1
  • 2016-01-01 10:37:15
  • 47861
收藏助手
不良信息举报
您举报文章:使用JavaScript把页面上的表格导出为Excel文件
举报原因:
原因补充:

(最多只允许输入30个字)