如何使用JavaScript和XLSX.js將數(shù)據(jù)導(dǎo)出為Excel文件
前言
導(dǎo)出數(shù)據(jù)是Web應(yīng)用程序中常見(jiàn)的功能之一。在許多情況下,我們需要將數(shù)據(jù)導(dǎo)出為Excel文件,以便用戶可以在本地計(jì)算機(jī)上查看和編輯數(shù)據(jù)。在本篇博客中,我們將介紹如何使用JavaScript和XLSX.js將數(shù)據(jù)導(dǎo)出為Excel文件。
XLSX.js是一個(gè)JavaScript庫(kù),它提供了一組API,可以將數(shù)據(jù)轉(zhuǎn)換為Excel文件。該庫(kù)支持多種數(shù)據(jù)源,包括數(shù)組、JSON對(duì)象和CSV文件。使用XLSX.js,我們可以輕松地將數(shù)據(jù)導(dǎo)出為Excel文件,并在Web應(yīng)用程序中提供下載鏈接。
在本篇博客中,我們將介紹如何使用XLSX.js將數(shù)據(jù)導(dǎo)出為Excel文件。我們將從安裝XLSX.js開(kāi)始,然后介紹如何將數(shù)據(jù)轉(zhuǎn)換為Excel文件,并提供一個(gè)完整的示例,以便您可以輕松地將其集成到您的Web應(yīng)用程序中。
一、安裝XLSX.js
XLSX.js 是一個(gè) JavaScript 庫(kù),可用于在瀏覽器中讀取和寫入 Excel 文件。它支持各種 Excel 文件格式,包括 .xlsx、.xlsm、.xlsb 和 .xls。XLSX.js 可以在瀏覽器中直接使用,也可以在 Node.js 中使用。
使用 XLSX.js,你可以將數(shù)據(jù)導(dǎo)出到 Excel 文件中,或從 Excel 文件中導(dǎo)入數(shù)據(jù)。它還提供了許多功能,例如:
- 解析 Excel 文件中的單元格
- 處理 Excel 文件中的日期格式
- 讀取和寫入 Excel 文件中的圖表和圖像
要使用XLSX.js,您需要將其添加到您的項(xiàng)目中。您可以通過(guò)npm安裝XLSX.js,也可以直接從CDN中引入它。在本篇博客中,我們將使用CDN來(lái)安裝XLSX.js。
您可以通過(guò)以下代碼將XLSX.js添加到您的HTML文件中:
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.full.min.js"></script>
上面的代碼將從CDN中加載XLSX.js的最新版本。您可以將版本號(hào)更改為您需要的版本?,F(xiàn)在,我們已經(jīng)安裝了XLSX.js,可以開(kāi)始導(dǎo)出數(shù)據(jù)了。
二、將數(shù)據(jù)轉(zhuǎn)換為Excel文件
要將數(shù)據(jù)導(dǎo)出為Excel文件,我們需要將其轉(zhuǎn)換為XLSX.js支持的格式。XLSX.js支持多種數(shù)據(jù)格式,包括數(shù)組、JSON對(duì)象和CSV文件。在本篇博客中,我們將介紹如何將數(shù)組和JSON對(duì)象轉(zhuǎn)換為Excel文件。
將數(shù)組轉(zhuǎn)換為Excel文件
要將數(shù)組轉(zhuǎn)換為Excel文件,我們需要使用XLSX.utils.aoa_to_sheet
方法將數(shù)組轉(zhuǎn)換為worksheet對(duì)象,然后將worksheet對(duì)象添加到workbook中。以下是將數(shù)組轉(zhuǎn)換為Excel文件的完整代碼示例:
import * as XLSX from "xlsx" const tempData = [ ['John Doe', 30], ['Jane Doe', 25], ['Bob Smith', 40] ]; // 將數(shù)組中的數(shù)據(jù)轉(zhuǎn)換為一個(gè)包含兩個(gè)屬性的對(duì)象數(shù)組 const exportData = this.tempData.map(item => { return { 'Name': item[0], 'Age': item[1] } // 將數(shù)據(jù)轉(zhuǎn)換為 worksheet 對(duì)象 const worksheet = XLSX.utils.aoa_to_sheet(exportData); // 將 worksheet 對(duì)象添加到 workbook 中 const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 導(dǎo)出 Excel 文件 XLSX.writeFile(workbook, 'data.xlsx');
在上面的代碼中,我們定義了一個(gè)包含數(shù)據(jù)的二維數(shù)組tempData
。然后,我們使用XLSX.utils.aoa_to_sheet
方法將數(shù)據(jù)轉(zhuǎn)換為worksheet對(duì)象。接下來(lái),我們創(chuàng)建一個(gè)新的workbook對(duì)象,并使用XLSX.utils.book_append_sheet
方法將worksheet對(duì)象添加到workbook中。最后,我們使用XLSX.writeFile
方法將workbook導(dǎo)出為Excel文件,并將其保存到本地文件系統(tǒng)中。
如果需要將Excel文件設(shè)置尾沒(méi)有表頭,即構(gòu)造的數(shù)據(jù)結(jié)構(gòu)沒(méi)有表頭,需要將header選項(xiàng)被設(shè)置為0。
// 構(gòu)造要導(dǎo)出的數(shù)據(jù)結(jié)構(gòu),不需要表頭 const exportData = this.tempData.map(item => { return [ item[0], item[1] ] }) // 將數(shù)據(jù)轉(zhuǎn)換為 worksheet 對(duì)象 const worksheet = XLSX.utils.aoa_to_sheet(exportData, { header: 0 }); // 將 worksheet 對(duì)象添加到 workbook 中 const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 導(dǎo)出 Excel 文件 XLSX.writeFile(workbook, 'test_read.xlsx');
將JSON對(duì)象轉(zhuǎn)換為Excel文件
要將JSON對(duì)象轉(zhuǎn)換為Excel文件,我們需要使用XLSX.utils.json_to_sheet
方法將JSON對(duì)象轉(zhuǎn)換為worksheet對(duì)象,然后將worksheet對(duì)象添加到workbook中。以下是將JSON對(duì)象轉(zhuǎn)換為Excel文件的完整代碼示例:
const data = [ { name: 'John Doe', age: 30, gender: 'Male' }, { name: 'Jane Doe', age: 25, gender: 'Female' }, { name: 'Bob Smith', age: 40, gender: 'Male' } ]; // 將數(shù)據(jù)轉(zhuǎn)換為 worksheet 對(duì)象 const worksheet = XLSX.utils.json_to_sheet(data); // 將 worksheet 對(duì)象添加到 workbook 中 const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 導(dǎo)出 Excel 文件 XLSX.writeFile(workbook, 'data.xlsx');
在上面的代碼中,我們定義了一個(gè)包含JSON對(duì)象的數(shù)組data
。然后,我們使用XLSX.utils.json_to_sheet
方法將JSON對(duì)象轉(zhuǎn)換為worksheet對(duì)象。接下來(lái),我們創(chuàng)建一個(gè)新的workbook對(duì)象,并使用XLSX.utils.book_append_sheet
方法將worksheet對(duì)象添加到workbook中。最后,我們使用XLSX.writeFile
方法將workbook導(dǎo)出為Excel文件,并將其保存到本地文件系統(tǒng)中。
總結(jié)
到此這篇關(guān)于如何使用JavaScript和XLSX.js將數(shù)據(jù)導(dǎo)出為Excel文件的文章就介紹到這了,更多相關(guān)XLSX.js數(shù)據(jù)導(dǎo)出Excel文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)類似拉勾網(wǎng)的鼠標(biāo)移入移出效果
其實(shí)也是個(gè)偶然的機(jī)會(huì)讓我想去研究一下這個(gè)效果。主要是由于有個(gè)群里的人發(fā)了個(gè)講解這個(gè)效果的鏈接,當(dāng)時(shí)也沒(méi)怎么在意,然后過(guò)兩天,突然就想起這件事,便去拉勾網(wǎng)一看,效果不錯(cuò)啊,所以就自己研究起來(lái),現(xiàn)在將過(guò)程分享給大家,有需要的可以參考借鑒。2016-10-10javascript實(shí)現(xiàn)全屏頁(yè)面滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)全屏頁(yè)面滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10純js實(shí)現(xiàn)無(wú)縫滾動(dòng)功能代碼實(shí)例
這篇文章主要介紹了純js實(shí)現(xiàn)無(wú)縫滾動(dòng)功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02JavaScript lodash常見(jiàn)用法系列小結(jié)
本篇文章主要介紹了JavaScript lodash用法小結(jié),非常不錯(cuò),具有參考借鑒價(jià)值,對(duì)于Javascript lodash教程感興趣的同學(xué)可以參考一下2016-08-08js實(shí)現(xiàn)上一頁(yè)下一頁(yè)的效果【附代碼】
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)上一頁(yè)下一頁(yè)的效果【附代碼】。小編覺(jué)得非常不錯(cuò)。現(xiàn)在分享給大家。希望能給大家一個(gè)參考。2016-03-03深入理解JavaScript中實(shí)例對(duì)象和new命令
典型的面向?qū)ο缶幊陶Z(yǔ)言(比如C++和 Java),都有“類”(class)這個(gè)概念。所謂“類”就是對(duì)象的模板,對(duì)象就是“類”的實(shí)例,下面這篇文章主要給大家介紹了關(guān)于JavaScript中實(shí)例對(duì)象和new命令的相關(guān)資料,需要的朋友可以參考下2022-12-12