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 文件中。
<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() 函數中，創建錨元素的新實例。之后，將編碼后的csvData設置為’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 文件，我們使用錨元素的虛擬實例。
以上就是如何在 JavaScript 中創建和下載 CSV 文件？的詳細內容，更多請關注www.92cms.cn其它相關文章！
