HTML Table导出为excel格式

最新推荐文章于 2024-05-16 18:15:52 发布

PLUTO06210331

最新推荐文章于 2024-05-16 18:15:52 发布

阅读量618

点赞数

文章标签： html css javascript html5 es6

本文链接：https://blog.csdn.net/qq_26732261/article/details/113656776

版权

最近项目中有个需求是将页面写好的表格导出位excel格式，刚开始毫无头绪，经过一番查阅找到了解决办法，废话不多说直接上代码:

const tableToExcel = (() => {
    const uri = 'data:application/vnd.ms-excel;base64,';
    const template =
      '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
    var base64 = (s) => {
      return window.btoa(unescape(encodeURIComponent(s)));
    };
    var format = (s, c) => {
      return s.replace(/{(\w+)}/g, (m, p) => {
        return c[p];
      });
    };
    return (table, name, filename) => {
      if (!table.nodeType) table = document.getElementById(table);
      var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML };

      document.getElementById('dlink').href = uri + base64(format(template, ctx));
      document.getElementById('dlink').download = filename;
      document.getElementById('dlink').click();
    };
  })();

注解:

页面上设置按钮可以直接点击调用这个函数，函数里面设置了需要导出的格式类型，将表格内容转化为base64编码，然后在导出为excel，具体可以查阅大神文档

关于上面函数中return里面的参数 table name fileName

table: 表格ID

name： excel中sheet页名称

fileName：导出时excel的名称

友情提示：我使用这个方法是在React项目中，所以转化为了ES6的写法，如果使用了antd的表格或者其他UI库的表格可以直接找插件进行下载。

PLUTO06210331

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML Table导出为excel格式

最近项目中有个需求是将页面写好的表格导出位excel格式，刚开始毫无头绪，经过一番查阅找到了解决办法，废话不多说直接上代码:const tableToExcel = (() => { const uri = 'data:application/vnd.ms-excel;base64,'; const template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:s
复制链接

扫一扫