【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>
相关推荐
luoganttcc9 分钟前
Cesium 加载 本地 b3dm 格式文件 并且 获取鼠标点击处经纬度 (亲测可用)
前端·javascript·3d
电子连接器CAE与高频分析3 小时前
Matlab添加标题title与标签lable
开发语言·matlab
努力弹琴的大风天3 小时前
MATLAB遇到内部问题,需要关闭,Crash Decoding : Disabled - No sandbox or build area path
开发语言·matlab
Aotman_3 小时前
Vue el-from的el-form-item v-for循环表单如何校验rules(二)
前端·javascript·vue.js
奋进的小暄4 小时前
数据结构(java)栈与队列
java·开发语言·数据结构
BillKu4 小时前
Vue3父子组件数据双向绑定示例
javascript·vue.js·elementui
笺上山河梦5 小时前
文件操作(二进制文件)
开发语言·c++·学习·算法
_一条咸鱼_7 小时前
Vue 配置模块深度剖析(十一)
前端·javascript·面试
有杨既安然7 小时前
Python自动化办公
开发语言·人工智能·深度学习·机器学习
King.6248 小时前
从 SQL2API 到 Text2API:开启数据应用开发的新征程
大数据·开发语言·数据库·sql·低代码