JavaScript 具有強(qiáng)大的能力來操作各種數(shù)據(jù)并處理不同格式的文件。有時(shí)，開發(fā)人員在使用 JavaScript 開發(fā) Web 應(yīng)用程序時(shí)需要使用 CSV 文件處理數(shù)據(jù)。
例如，我們正在構(gòu)建一個(gè)電子商務(wù)平臺(tái)，用戶可以在其中購買和銷售產(chǎn)品。此外，我們希望允許用戶根據(jù)時(shí)間范圍將訂單詳細(xì)信息下載到 CSV 文件中。在這種情況下，我們需要與數(shù)據(jù)和 CSV 文件進(jìn)行交互。另一個(gè)例子是網(wǎng)上銀行網(wǎng)站允許我們下載 CSV 文件中的交易詳細(xì)信息。
在本教程中，我們將學(xué)習(xí)根據(jù) JavaScript 或 JSON 對(duì)象格式的給定數(shù)據(jù)創(chuàng)建 csv 文件并下載該文件。
語法
用戶可以按照以下語法從給定數(shù)據(jù)創(chuàng)建并下載 CSV 文件。
laptops.forEach(function (row) {
csvData += data
});
let anchor = document.createElement('a');
anchor.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvData);
anchor.click();
登錄后復(fù)制
在上面的語法中，“csvData”是一個(gè)使用數(shù)據(jù)附加 CSV 文件行的數(shù)組。之后，我們使用錨標(biāo)記從 csvData 創(chuàng)建 CSV 文件，并通過單擊錨元素下載該文件。
示例
在下面的示例中，我們首先創(chuàng)建了名為“l(fā)aptops”的對(duì)象數(shù)組，其中數(shù)組的每個(gè)對(duì)象都包含品牌、處理器、價(jià)格和 RAM 屬性。
在 downloadFile() 函數(shù)中，我們將用逗號(hào)分隔的對(duì)象鍵添加到“csvData”變量中。之后，我們遍歷給定的對(duì)象數(shù)組，并通過以相同順序連接每個(gè)屬性值（通過逗號(hào)分隔并將其附加到“CSVData”變量）來準(zhǔn)備單行。
接下來，我們使用createElement()方法創(chuàng)建錨元素，并在使用encodeURI()方法編碼后添加“csvData”作為href屬性的值。此外，我們還設(shè)置了目標(biāo)值和下載屬性值。最后，我們點(diǎn)擊錨元素下載 CSV 文件。
在輸出中，用戶可以單擊按鈕將數(shù)據(jù)下載到 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>
登錄后復(fù)制
示例
在下面的示例中，我們將從 API 獲取數(shù)據(jù)并使用 JSON 數(shù)據(jù)創(chuàng)建 CSV 文件。我們?cè)?HTML 部分創(chuàng)建了按鈕，當(dāng)用戶單擊該按鈕時(shí)，它會(huì)執(zhí)行 downloadFile() 函數(shù)來獲取 JSON 數(shù)據(jù)并將其下載到 CSV 文件中。
程序員可以按照以下步驟來理解示例代碼 –
第 1 步 – 使用 fetch() API 從 API URL 獲取數(shù)據(jù)。
第 2 步 – 之后，使用 res.json() 方法將響應(yīng)轉(zhuǎn)換為 JSON 對(duì)象。
第 3 步 – 在 then() 塊中，初始化 csvData[] 數(shù)組以存儲(chǔ) CSV 文件的行。
步驟 4 – 從響應(yīng)中獲取第一個(gè)對(duì)象并將其作為 Object.keys() 方法的參數(shù)傳遞以獲取數(shù)組中的所有鍵。之后，使用 join() 方法將鍵連接到單個(gè)字符串中，并以逗號(hào)分隔并推送到 csvData 數(shù)組。
第 5 步– 遍歷我們?cè)陧憫?yīng)中得到的所有對(duì)象。在循環(huán)中，我們使用帶有 ‘heads’ 數(shù)組的 map() 方法，根據(jù) ‘heads’ 數(shù)組元素（對(duì)象鍵）從當(dāng)前對(duì)象獲取值，并將值映射到 ‘rowValues’ 數(shù)組。
第 6 步 – 接下來，使用 join() 方法連接“rowValues”數(shù)組的所有元素并將它們推入“csvData”數(shù)組中。
第 7 步 – 使用“
”分隔符連接“csvData”數(shù)組的所有元素，并將其作為 getCSVFile() 函數(shù)參數(shù)傳遞。
第 8 步– 在 getCSVFile() 函數(shù)中，創(chuàng)建錨元素的新實(shí)例。之后，將編碼后的csvData設(shè)置為’href’屬性值，并設(shè)置’target’和’download’屬性值。
第 9 步– 單擊錨點(diǎn)元素下載文件。
<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>
登錄后復(fù)制
兩個(gè)示例代碼都包含兩個(gè)主要部分。第一部分是操作給定的數(shù)據(jù)并將它們與逗號(hào)分隔的字符串連接起來，我們將其用于 CSV 文件數(shù)據(jù)。下一部分是將數(shù)據(jù)附加到文件并下載文件。為了創(chuàng)建 CSV 文件，我們使用錨元素的虛擬實(shí)例。
以上就是如何在 JavaScript 中創(chuàng)建和下載 CSV 文件？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
