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

【背景】

网页上有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>
相关推荐
devmoon5 分钟前
运行时(Runtime)是什么?为什么 Polkadot 的 Runtime 可以被“像搭积木一样”定制
开发语言·区块链·智能合约·polkadot·runtmie
时艰.6 分钟前
Java 并发编程 — 并发容器 + CPU 缓存 + Disruptor
java·开发语言·缓存
忆~遂愿20 分钟前
GE 引擎进阶:依赖图的原子性管理与异构算子协作调度
java·开发语言·人工智能
沐知全栈开发24 分钟前
API 类别 - 交互
开发语言
人道领域44 分钟前
SSM框架从入门到入土(AOP面向切面编程)
java·开发语言
铅笔侠_小龙虾1 小时前
Flutter 实战: 计算器
开发语言·javascript·flutter
2的n次方_1 小时前
Runtime 执行提交机制:NPU 硬件队列的管理与任务原子化下发
c语言·开发语言
大模型玩家七七1 小时前
梯度累积真的省显存吗?它换走的是什么成本
java·javascript·数据库·人工智能·深度学习
2501_944711431 小时前
JS 对象遍历全解析
开发语言·前端·javascript
凡人叶枫2 小时前
C++中智能指针详解(Linux实战版)| 彻底解决内存泄漏,新手也能吃透
java·linux·c语言·开发语言·c++·嵌入式开发