JavaScript 具有強大的能力來操作各種資料並處理不同格式的檔案。有時，開發人員在使用 JavaScript 開發 Web 應用程式時需要使用 CSV 檔案處理資料。
例如，我們正在建立一個電子商務平台，用戶可以在其中購買和銷售產品。此外，我們希望允許用戶根據時間範圍將訂單詳細資訊下載到 CSV 檔案中。在這種情況下，我們需要與資料和 CSV 檔案進行互動。另一個例子是網路銀行網站允許我們下載 CSV 檔案中的交易詳細資訊。
在本教程中，我們將學習根據 JavaScript 或 JSON 物件格式的給定資料建立 csv 檔案並下載該檔案。
使用者可以按照以下語法從給定資料建立並下載 CSV 檔案。
laptops.forEach(function (row) { csvData += data }); let anchor = document.createElement('a'); anchor.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvData); anchor.click();
在上面的語法中，「csvData」是一個使用資料附加 CSV 檔案行的陣列。之後，我們使用錨標記從 csvData 建立 CSV 文件，並透過點擊錨元素下載該文件。
在下面的範例中，我們首先建立了一個名為「laptops」的物件數組，其中數組的每個物件都包含品牌、處理器、價格和 RAM 屬性。
在 downloadFile() 函數中，我們將用逗號分隔的物件鍵加入到「csvData」變數中。之後，我們遍歷給定的物件數組，並透過以相同順序連接每個屬性值（透過逗號分隔並將其附加到「CSVData」變數）來準備單行。
接下來，我們使用createElement()方法建立錨元素，並在使用encodeURI()方法編碼後新增「csvData」作為href屬性的值。此外，我們也設定了目標值和下載屬性值。最後，我們點擊錨元素下載 CSV 檔案。
在輸出中，使用者可以點擊按鈕將資料下載到 CSV 檔案中。
Creating and dowlonading the CSV file from the given data in JavaScript
在下面的範例中，我們將從 API 取得資料並使用 JSON 資料建立 CSV 檔案。我們在 HTML 部分建立了按鈕，當使用者點擊該按鈕時，它會執行 downloadFile() 函數來取得 JSON 資料並將其下載到 CSV 檔案中。
程式設計師可以按照以下步驟來理解範例程式碼 -
第 1 步- 使用 fetch() API 從 API URL 取得資料。
第 2 步- 之後，使用 res.json() 方法將回應轉換為 JSON 物件。
第 3 步- 在 then() 區塊中，初始化 csvData[] 陣列以儲存 CSV 檔案的行。
步驟 4- 從回應中取得第一個物件並將其作為 Object.keys() 方法的參數傳遞以取得陣列中的所有鍵。之後，使用 join() 方法將鍵連接到單一字串中，並以逗號分隔並推送到 csvData 陣列。
第 5 步- 遍歷我們在回應中得到的所有物件。在迴圈中，我們使用帶有 'heads' 陣列的 map() 方法，根據 'heads' 陣列元素（物件鍵）從目前物件取得值，並將值對應到 'rowValues' 陣列。
第 6 步- 接下來，使用 join() 方法連接「rowValues」陣列的所有元素並將它們推入「csvData」陣列中。
第 7 步- 使用「
」分隔符號連接「csvData」陣列的所有元素，並將其作為 getCSVFile() 函數參數傳遞。
第 8 步- 在 getCSVFile() 函數中，建立錨元素的新實例。之後，將編碼後的csvData設定為'href'屬性值，並設定'target'和'download'屬性值。
第 9 步- 點選錨點元素下載檔案。
Creating and dowlonading the CSV file after fetching JSON data in JavaScript
兩個範例程式碼都包含兩個主要部分。第一部分是操作給定的資料並將它們與逗號分隔的字串連接起來，我們將其用於 CSV 檔案資料。下一部分是將資料附加到檔案並下載檔案。為了創建 CSV 文件，我們使用錨元素的虛擬實例。
以上是如何在 JavaScript 中建立和下載 CSV 檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
