【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>
相关推荐
a程序小傲2 分钟前
京东Java面试被问:基于Gossip协议的最终一致性实现和收敛时间
java·开发语言·前端·数据库·python·面试·状态模式
tqs_123454 分钟前
Spring Boot 的自动装配机制和 Starter 的实现原理
开发语言·python
程序员小白条9 分钟前
面试 Java 基础八股文十问十答第二十二期
java·开发语言·数据库·面试·职场和发展·毕设
xkxnq14 分钟前
第三阶段:Vue 路由与状态管理(第 45 天)(路由与状态管理实战:开发一个带登录权限的单页应用)
前端·javascript·vue.js
编程大师哥14 分钟前
JavaScript 和 Python 哪个更适合初学者?
开发语言·javascript·python
建军啊24 分钟前
php伪协议、代码审计工具和实战
开发语言·php
WYH28729 分钟前
为什么在cubeide里勾选了can1,生成的工程里没有can.c?
c语言·开发语言
32 分钟前
java关于键盘录入
java·开发语言
马猴烧酒.34 分钟前
JAVA后端对象存储( 图片分享平台)详解
java·开发语言·spring·腾讯云
wearegogog12343 分钟前
基于MATLAB的D2D仿真场景实现
开发语言·网络·matlab