如何用JavaScript將網頁表格數據轉換為CSV文件

網頁開發中，我們經常需要將表格中的數據導出為CSV文件，以便進行數據分析或共享。今天，我們就來分享一下如何通過JavaScript實現這個功能。具體實現步驟包括：提取表格數據、構建CSV字符串、創建下載鏈接以及觸發下載操作。希望這個教程能幫你輕松實現表格數據導出功能！

完整代碼片段

首先，我們來看一下完整的代碼片段，然后再進行分段介紹。

function extractTableData(tableId) {
  const table = document.getElementById(tableId);
  const data = [];

  for (const row of table.rows) {
    const rowData = [];
    for (const cell of row.cells) {
      rowData.push(cell.innerText.trim());
    }
    data.push(rowData);
  }

  return data;
}

function buildCsvString(data) {
  return data.map(row => row.join(',')).join('\n');
}

function createDownloadLink(csvContent) {
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
  return URL.createObjectURL(blob);
}

function triggerDownload(url, filename) {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
}

function exportTableToCsv(tableId, filename) {
  const tableData = extractTableData(tableId);
  const csvContent = buildCsvString(tableData);
  const downloadUrl = createDownloadLink(csvContent);
  triggerDownload(downloadUrl, filename);
}

// 調用示例
exportTableToCsv('myTableId', 'exported_data.csv');

提取表格數據

首先，我們需要通過 document.getElementById 選擇目標表格。然后，我們使用 for...of 循環遍歷每一行 (<tr>) 和每一個單元格 (<td>)，提取其中的文本內容并去除多余的空格。

function extractTableData(tableId) {
  const table = document.getElementById(tableId);
  const data = [];

  for (const row of table.rows) {
    const rowData = [];
    for (const cell of row.cells) {
      rowData.push(cell.innerText.trim());
    }
    data.push(rowData);
  }

  return data;
}

在這個函數中，我們首先通過ID獲取目標表格，然后遍歷每一行和每一個單元格，將單元格的文本內容去除多余空格后存入一個數組，最后將這個數組推入 data 數組中。

構建CSV字符串

接下來，我們創建一個函數 buildCsvString，將提取的表格數據構建成CSV字符串。我們使用逗號（,）連接每行的數據，并用換行符（\n）連接每行。

function buildCsvString(data) {
  return data.map(row => row.join(',')).join('\n');
}

在這個函數中，我們使用 map 方法遍歷每一行的數據，將每行數據用逗號連接成字符串，然后再用換行符將所有行連接成一個完整的CSV字符串。

創建下載鏈接

使用 Blob 對象創建一個表示CSV數據的blob，并將其類型設置為 text/csv。然后，使用 URL.createObjectURL 創建一個臨時的URL來指向這個blob。

function createDownloadLink(csvContent) {
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
  return URL.createObjectURL(blob);
}

在這個函數中，我們首先創建一個 Blob 對象，并將CSV內容傳入。然后，使用 URL.createObjectURL 方法創建一個指向這個 Blob 對象的臨時URL。

觸發下載

最后，我們創建一個新的錨點 (<a>) 元素，并將其 href 屬性設置為臨時URL，download 屬性設置為我們想要的文件名（例如，"exported_data.csv"）。然后，模擬點擊事件以啟動下載。

function triggerDownload(url, filename) {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
}

在這個步驟中，我們創建一個新的 <a> 元素，并設置其 href 和 download 屬性。然后，通過調用 click 方法模擬一次點擊事件，觸發文件下載。最后，使用 URL.revokeObjectURL 方法釋放這個臨時URL。

整合函數

最后，我們將上述步驟整合到一個函數中，便于調用。

function exportTableToCsv(tableId, filename) {
  const tableData = extractTableData(tableId);
  const csvContent = buildCsvString(tableData);
  const downloadUrl = createDownloadLink(csvContent);
  triggerDownload(downloadUrl, filename);
}

// 調用示例
exportTableToCsv('myTableId', 'exported_data.csv');

通過以上步驟，你就可以輕松實現將表格數據導出為CSV文件的功能了。希望這篇教程對你有所幫助！如果有任何問題或建議，歡迎在評論區留言互動。

結語

導出表格數據為CSV文件是一個非常實用的功能，不僅可以幫助我們方便地保存和分享數據，還可以用于數據分析和處理。希望通過這篇文章，你能夠掌握這一技巧，并在實際項目中應用。如果你覺得這篇文章對你有幫助，記得點贊、收藏并分享給更多的小伙伴！如果你有任何問題或需要進一步的幫助，歡迎在評論區留言，我會及時回復你。謝謝閱讀！

么是JSTL呢？JSTL英文全稱是：JavaServer Pages Standard Tag Library，中文意思是：Java服務頁面標準標簽類庫。為什么會出現JSTL標簽庫呢？？？我們來看下這種情況：假設現在需要循環渲染一個列表內容，在沒有出現JSTL之前，如果使用JSP開發，那么我們可能會寫出下面這種代碼：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>案例代碼</title>
</head>
<body>
    <h3>循環輸出li列表</h3>
    <% for (int i = 0; i < 5; i++) { %>
        <li>
            這是第<%=i %>個列表內容
        </li>
    <% } %>
</body>
</html>

最終實現的效果就如下所示：

雖然上面的代碼可以實現循環輸出內容的功能，但是你可以看到html代碼和Java代碼互相嵌套在一起，可讀性較差，并且后面代碼越來越多的時候，可維護性也會變得很差。為了解決這個問題，提高JSP文件中Java代碼的可讀性，于是就出現了JSTL標簽庫，sun公司將常用的功能代碼封裝成了一個個指定的類似xml的標簽，例如：<c:if>、<c:forEach>等等，并且結合EL表達式獲取到數據，進行數據的渲染，最終完成整個HTML網頁的展示。

1.1、<c:forEach>循環標簽

<c:forEach>標簽的作用是循環輸出內容，是來自于JSTL核心標簽庫，標簽庫地址：http://java.sun.com/jsp/jstl/core。我們在使用標簽庫的時候，需要使用<%@taglib%>指令，語法格式如下所示：

// prefix屬性用于指定前綴名稱，一般寫【c】
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

如下圖所示：

通過<%@ taglib%>指令引入core核心庫標簽之后，就可以在當前JSP頁面中使用JSTL標簽啦。<c:forEach>標簽的語法格式如下所示：

<%--
    items 屬性：需要循環變量的數據集合
    begin 屬性：從哪個下標開始循環
    end 屬性：哪個下標結束循環
    step 屬性：每一次循環的步長
    var 屬性：當前遍歷到的元素變量名稱
    varStatus 屬性：當前遍歷到的元素狀態;
        index：可以通過index屬性獲取到當前元素下標，從0開始;
        count：通過count屬性獲取當前第幾次循環，從1開始;
        first：是否第一個元素;
        last：是否最后一個元素;
        current：獲取當前元素;
        begin：開始下標;
        end：結束下標;
        step：步長;
--%>
    <c:forEach items="${randomNumList}" begin="0" end="3" step="1" var="item" varStatus="status">
        <li>當前元素：${item}，下標：${status.index}，總數：${status.count}</li>
    </c:forEach>

其中varStatus屬性具有下面這些屬性值：

下面來看看<c:forEach>標簽的具體案例代碼。

1.3、案例代碼

<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 引入標簽庫 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>JSTL標簽庫之c:for標簽</title>
</head>
<body>
    <%
        List<Double> randomNumList = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            randomNumList.add(Math.random() * 100);
        }
        pageContext.setAttribute("randomNumList", randomNumList);
    %>
    <h3>JSTL標簽庫之c:for標簽</h3>
    <h3>c:for循環標簽</h3>
<%--
    items 屬性：需要循環變量的數據集合
    begin 屬性：從哪個下標開始循環
    end 屬性：哪個下標結束循環
    step 屬性：每一次循環的步長
    var 屬性：當前遍歷到的元素變量名稱
    varStatus 屬性：當前遍歷到的元素狀態;
        index：可以通過index屬性獲取到當前元素下標，從0開始;
        count：通過count屬性獲取當前第幾次循環，從1開始;
        first：是否第一個元素;
        last：是否最后一個元素;
        current：獲取當前元素;
        begin：開始下標;
        end：結束下標;
        step：步長;
--%>
    <c:forEach items="${randomNumList}" begin="0" end="3" step="1" var="item" varStatus="status">
        <li>當前元素：${item}，下標：${status.index}，總數：${status.count}</li>
    </c:forEach>
</body>
</html>

運行結果如下所示：

以上，就是JSTL中的<c:forEach>循環語句標簽的使用，<c:forEach>標簽就是Java語言中的for語句。

今天就到這里，未完待續~~

一章節我們探討了Vue的入門，對Vue有了初步的了解，并且掌握了模板語法。本節課我們的學習目標是Vue的指令。

首先解釋以下什么叫做指令，指定就是命令的意思，人們用指令表達自己的意圖。Vue中有多種指令，每種指令有不同的功能，比如有個指令的名字叫做v-text，此指令用于主要用來更新html標簽InnerText內容，等同于JS操作dom元素的text屬性。

除此以外vue還提供了多種指令，接下來我們就開始詳細介紹這些指令的使用場景已經使用方式。

2.1 什么是指令

我們已經了解到Vue雖然使用場景與功能類似于JQuery，但是語法習慣完全不同于JQuery，比如Vue使用步驟主要有實例化Vue對象，掛載點使用模板語法綁定數據。除此以外Vue指令也是Vue使用中的重要組成部分，根據不同的指令有不同的功能，比如綁定事件，渲染InnerText數據，渲染InnerHtml數據。

2.1.1 什么是Vue指令

Vue中的指令存在的形式是以“v-”為前綴的特殊屬性，出現在html的標簽的屬性部分，功能是當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM。

Vue指令的組成部分如下所示。

<tag標簽 v-指令名="表達式"> </tag標簽>

2.1.2 DOM節點

無論是傳統的原生js,還是老牌前端框架JQuery，包括正在學習的Vue，他們的功能主要都是操作dom節點對象，我們這里再復習一下dom節點的相關概念，因為指令就是對DOM節點的操作。在 HTML DOM 中 , 每一個元素都是節點，Vue指令就是節點的特殊屬性。Vue.js是數據驅動的，無需手動操作DOM，它通過指令語法，將DOM和數據綁定起來。一旦創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。

2.2 指令一覽

Vue提供了多種內置的指令，不同的指令有不同的功能，在具體學習每種指令之前，我們先將部分常見指令以表格形式進行一覽，如圖2.1所示。

圖2.1 部分指令一覽

2.3 v-if & v-else-if & v-else指令

先描述一個場景：現有一組標簽，此標簽展示內容只有在當前用戶符合某些條件的情況下才顯示。

這種類型的功能在開發中是十分常見的，實現思路也很簡單，需要先進行判斷是否符合條件，根據判斷結果來決定是否展示標簽。在Vue中想要實現此種功能，就需要使用v-if指令。

2.3.1 v-if指令

我們使用v-if指令來實現剛才描述的場景，創建index.html文件，并使用上一章節中我們學習過的內容快速加載Vue環境，這里就不在重新闡述。index.html中判斷當前level的值是否大于等于10，如果大于10在頁面中顯示文字：“歡迎來自艾歐尼亞的最強王者上機！”如果levle的值小于10則什么都不顯示。為了實現此效果，我們需要使用到v-if指令。index.html代碼內容如2-1所示：

例2-1 index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>v-if指令</title>
</head>
<body>
<div id="app">
<span v-if="levle>=10">歡迎來自艾歐尼亞的最強王者上機！</span>
</div>

在線咨詢

上一篇：「PHP基礎知識」在頁面中顯示“Hello World！”
下一篇：Python - 編寫條件分支代碼的技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商