資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物學
數學
英語
經濟學
心理學
社會研究
時裝研究
法律研究如何在 JavaScript 中建立和下載 CSV 檔案？
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 檔案，並透過單擊錨元素下載檔案。
示例
在下文示例中，首先建立名為“筆記本”的物件陣列，其中每個物件包含品牌、處理器、價格和 RAM 屬性。
在 downloadFile() 函式中，將物件鍵以逗號分隔的方式新增到“csvData”變數中。之後，遍歷指定的物件陣列，並透過連線每個屬性值（以相同的順序）並以逗號分隔，來準備一個單獨的行，並將其附加到“CSVData”變數中。
接下來，使用 createElement() 方法建立錨點元素，並在對資料使用 encodeURI() 方法編碼後，將“csvData”新增為 href 屬性的值。此外，我們設定目標和下載屬性值。最後，點選錨點元素來下載 CSV 檔案。
在輸出中，使用者可以單擊按鈕將資料下載到 CSV 檔案中。
<html>
<body>
<h3>Creating and dowlonading the CSV file from the given data in JavaScript</h3>
<div id="data"> </div>
<button onclick="downloadFile()"> Download CSV file </button>
<script>
let laptops = [{
brand: 'HP',
processor: 'i3',
price: 30000,
ram: 4
},
{
brand: 'Dell',
processor: 'i5',
price: 50000,
ram: 8
},
{
brand: 'Apple',
processor: 'i7',
price: 70000,
ram: 16
},
{
brand: 'Lenovo',
processor: 'i3',
price: 35000,
ram: 4
},
{
brand: 'Asus',
processor: 'i5',
price: 45000,
ram: 8
},
{
brand: 'Acer',
processor: 'i7',
price: 65000,
ram: 16
}
];
// Function to download data to a CSV file
function downloadFile() {
// Add header
let csvData = 'Brand, Processor, Price, RAM
';
// Add data
laptops.forEach(function (row) {
csvData += row.brand + ',' + row.processor + ',' + row.price + ',' + row.ram + '
';
});
// Download the CSV file
let anchor = document.createElement('a');
anchor.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvData);
anchor.target = '_blank';
anchor.download = 'laptops.csv';
anchor.click();
}
</script>
</body>
</html>
示例
在下文示例中，我們將從 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() 函式中，建立一個錨點元素的新例項。之後，對資料進行編碼後將其設定為“href”屬性值，並設定“target”和“download”屬性值。
步驟 9 − 單擊錨點元素下載檔案。
<html>
<body>
<h3>Creating and dowlonading the CSV file </i> after fetching JSON data in JavaScript</h3>
<div id = "data"> </div>
<button onclick = "downloadFile()"> Download CSV file </button>
<script>
function downloadFile() {
let APIURL = "https://dummyjson.com/products";
// Fetch data from API
fetch(APIURL)
.then(response => response.json())
.then(data => {
let csvData = [];
// Get headers
let heads = Object.keys(data.products[0]);
// Add headers to csvData
csvData.push(heads.join(','));
// Traveres through each row
for (let row of data.products) {
// Get values from each row
let rowValues = heads.map(headerData => {
// Get value according to the header
let final = ('' + row[headerData]).replace(/"/g, '"');
return `"${final}"`;
});
// Push values in csvData
csvData.push(rowValues.join(','));
}
// Call function to download CSV file
getCSVFile(csvData.join('
'));
});
}
function getCSVFile(csvData) {
let anchor = document.createElement('a');
anchor.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvData);
anchor.target = '_blank';
anchor.download = 'test.csv';
anchor.click();
}
</script>
</body>
</html>
兩個示例程式碼都包含兩個主要部分。第一部分是操作給定資料並將它們連線成用逗號分隔的字串，我們將其用作 CSV 檔案資料。下一部分是將資料追加到檔案並下載該檔案。為了建立 CSV 檔案，我們使用錨點元素的虛擬例項。
5000+ 次觀看
