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

【背景】

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

【分析】

首先,由于目标是下载已经展示在网页上的Table元素内容,所以,可以直接由前端JS实现。
如果是要下载分页展示的全量文件,则不能使用此方法。

【方法】

JS功能函数:

  <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中插入按钮元素并关联函数:

  <button type="button" class="btn btn-default" onclick="download2();">
    <span class="glyphicon glyphicon-export" aria-hidden="true">页面下载</span>
  </button>
  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
当您需要在网页上展示CSV文件时,可以使用HTML5中的File API来读取文件,并使用JavaScript将其转换为HTML表格。 以下是一个示例代码,可以帮助您实现这一功能: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSV to HTML Table</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } </style> </head> <body> <input type="file" id="fileinput"> <div id="table-container"></div> <script> // 获取文件输入框元素 var fileInput = document.getElementById("fileinput"); // 监听文件选择事件 fileInput.addEventListener("change", function(e) { var file = e.target.files[0]; // 使用FileReader对象读取文件 var reader = new FileReader(); reader.onload = function(e) { var csv = e.target.result; // 将CSV字符串转换为HTML表格 var html = "<table>"; var rows = csv.split("\n"); rows.forEach(function(row) { html += "<tr>"; var cells = row.split(","); cells.forEach(function(cell) { html += "<td>" + cell + "</td>"; }); html += "</tr>"; }); html += "</table>"; // 将表格添加到页面中 var container = document.getElementById("table-container"); container.innerHTML = html; }; reader.readAsText(file); }); </script> </body> </html> ``` 在这个示例中,我们首先获取了文件输入框元素,并监听了其文件选择事件。当用户选择了文件后,我们使用FileReader对象读取文件,并将其转换为CSV字符串。然后,我们使用split()函数将字符串分割成行和单元格,并使用forEach()函数循环处理每一行和单元格。最后,我们将结果转换为HTML表格,并将其添加到页面中。 需要注意的是,这个示例只适用于简单的CSV文件,如果文件中存在复杂的结构或特殊字符,可能需要进行额外的处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每日出拳老爷子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值