【JS】如何将网页上的Table元素下载为CSV文件

每日出拳老爷子2024-08-07 18:35

【背景】

网页上有Table元素，希望加一个按钮，实现点击按钮就下载Table元素内容为CSV文件。

【分析】

首先，由于目标是下载已经展示在网页上的Table元素内容，所以，可以直接由前端JS实现。

如果是要下载分页展示的全量文件，则不能使用此方法。

【方法】

JS功能函数：

javascript 复制代码

  <script>
    function download2(type, fn, dl) {
      var elt = document.getElementsByClassName('hover stripe dataTable no-footer')[1];
      var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"});
      return dl ?
        XLSX.write(wb, {bookType:type, bookSST:true, type: 'base64'}) :
      XLSX.writeFile(wb, fn || ('BaseCustTranTable.' + (type || 'xlsx')));
    }
  </script>

Html中插入按钮元素并关联函数：

html 复制代码

  <button type="button" class="btn btn-default" onclick="download2();">
    <span class="glyphicon glyphicon-export" aria-hidden="true">页面下载</span>
  </button>