Js导出excel

最新推荐文章于 2024-07-12 14:10:05 发布

chenghui4603

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3578334/blog/1623752

版权

利用html的table表格的格式书写想要的excel格式
获取table的内容并组装成一个xls格式的字符串
利用Blob对象生成一个xls格式的文件
利用a标签的download属性创建文件名，并下载到本地

1.包含数据的table表格

<table class="dataTable">
    <thead>
      <tr class="title">
        <th colspan="4">学生信息</th>
      </tr>
      <tr>
        <th>名字</th>
        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>19</td>
        <td>1班</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>20</td>
        <td>2班</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>男</td>
        <td>29</td>
        <td>3班</td>
      </tr>
      <tr class="footer">
        <td colspan="4">总人数：3人</td>
      </tr>
    </tbody>
  </table>
  <button id="btnExport">导出Excel</button>

2.js代码

//js导出excel： https://www.cnblogs.com/suyuanli/p/7945102.html

$("#btnExport").click(function () {
    //获取table的html内容
    //dataTable可以动态传入
    var oHtml = document.getElementById("dataTable").outerHTML;

    //es6的字符串语法``和${},http://es6.ruanyifeng.com/#docs/string#模板字符串 "es6字符串模板"
      var excelHtml = `
            <html>
            <head>
            <meta charset='utf-8' />
            <style>
                 table th,table td{ border:1px solid black;}  
            </style>
            </head>
            <body>
            ${oHtml}
            </body>
            </html>
    `;

    //Blob 构造函数,生成Excel
    var excelBlob = new Blob([excelHtml], { type: 'application/vnd.ms-excel' })
    // 创建一个a标签
    var oA = document.createElement('a');
    // 利用URL.createObjectURL()方法为a元素生成blob URL
    oA.href = URL.createObjectURL(excelBlob);
    // 给文件命名
    oA.download = 'Js导出示例.xls';
    // 模拟点击
    oA.click();
    // 移除
    oA.remove();
});

补充：
1.Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。 File 接口基于Blob，继承了 blob的功能并将其扩展使其支持用户系统上的文件。

2.URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

参考： https://www.cnblogs.com/suyuanli/p/7945102.html

转载于:https://my.oschina.net/u/3578334/blog/1623752

chenghui4603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js导出excel

利用html的table表格的格式书写想要的excel格式获取table的内容并组装成一个xls格式的字符串利用Blob对象生成一个xls格式的文件利用a标签的download属性创建文件名，并下载到本地1.包含数据的table表格<table class="dataTab...
复制链接

扫一扫