【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>
相关推荐
程序员鱼皮42 分钟前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort1 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手1 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码1 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码1 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
小高0071 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴1 小时前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong1 小时前
JavaScript逆向之反制无限debugger陷阱
前端·javascript
skykun1 小时前
今天你学会JS的类型转换了吗?
javascript
Lotzinfly1 小时前
8 个经过实战检验的 Promise 奇淫技巧你需要掌握😏😏😏
前端·javascript·面试