纯js代码把<table>表格另存为Excel文件

最新推荐文章于 2024-06-13 20:20:29 发布

乘简

最新推荐文章于 2024-06-13 20:20:29 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： JS javascript 导出 excel xls

本文链接：https://blog.csdn.net/zwf888/article/details/103407477

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先为什么要写这篇文章，因为这个看上去很容易实现的功能，但网上读了很多文章，发现要么不支持IE，要么还要使用new ActiveXObject("Excel.Application");，要么就发现导出的文件是html文件（只不过可以用Excel打开），根本就不是真正的Excel文件，所以我很不爽，最后功夫不负有心人，把所有文章来个总结就出来了这么一个代码，感觉很好用的样子，当然还得下载xlsx.core.min.js文件的支持，否则不能导出真正的Excel文件。

<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>JS导出excel示例</title>
  <script src='js/xlsx.core.min.js' type='text/javascript'></script>
  <script type="text/javascript">
  function getExplorer(){
    var explorer = window.navigator.userAgent;
    //ie 
    if(explorer.indexOf("MSIE") >= 0){
      return 'ie';
    }
    //Edge
    if(explorer.indexOf("Edge") >= 0){
      return 'ie';
    }
    //Trident
    if(explorer.indexOf("Trident") >= 0){
      return 'ie';
    }
    return '';
  }
  // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
  function sheet2blob(sheet, sheetName) {
    try {
        new Uint8Array([1,2]).slice(0,2);
    } catch (e) {
        console.log("[Uint8Array"+e.description+"]这里使用【Array.slice】。");
        //IE或有些浏览器不支持Uint8Array.slice()方法。改成使用Array.slice()方法
        Uint8Array.prototype.slice = Array.prototype.slice;
    }
    sheetName = sheetName || 'sheet1';
    var workbook = {
      SheetNames: [sheetName],
      Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet;
    // 生成excel的配置项
    var wopts = {
      bookType: 'xlsx', // 要生成的文件类型
      bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
      type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
    // 字符串转ArrayBuffer
    function s2ab(s) {
      var buf = new ArrayBuffer(s.length);
      var view = new Uint8Array(buf);
      for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
    return blob;
  }
  
  function btn_export() {
    var table = document.getElementById('context');
    var sheet = XLSX.utils.table_to_sheet(table); //将一个table对象转换成一个sheet对象
    var wb=sheet2blob(sheet);
    if('ie'==getExplorer()){
      window.navigator.msSaveOrOpenBlob(wb,'excel.xlsx');
    }
    else{
      var oa = document.createElement('a');
      oa.href = URL.createObjectURL(wb);
      oa.download = 'excel.xlsx';
      document.body.appendChild(oa);
      oa.click();
      document.body.removeChild(oa);
    }
  }
  </script>
</head>
<body>
  <div class="container">
    <h1>JavaScript导出excel示例（基于js-xlsx）</h1>
    <table border=1 id='context' cellpadding="0" cellspacing="0">
      <tr><td>姓名</td><td>年龄</td></tr><tr><td>张三</td><td>18</td></tr>
    </table>
    
    <h2>导出excel
      <input type="button" OnClick="btn_export()" value="导出"/>
    </h2>
  </div>
</body>
</html>

xlsx.core.min.js文件的下载地址

官方github：https://github.com/SheetJS/js-xlsx

也可以到CSCN上找下载地址，找0分的资源即可，比如：https://download.csdn.net/download/qq_27868533/10249815?utm_source=bbsseo

乘简

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
纯js代码把<table>表格另存为Excel文件

首先为什么要写这篇文章，因为这个看上去很容易实现的功能，但网上读了很多文章，发现要么不支持IE，要么还要使用new ActiveXObject("Excel.Application");，要么就发现导出的文件是html文件（只不过可以用Excel打开），根本就不是真正的Excel文件，所以我很不爽，最后功夫不负有心人，把所有文章来个总结就出来了这么一个代码，感觉很好用的样子，当然还得下载xlsx....
复制链接

扫一扫

专栏目录