前言

導(dǎo)出數(shù)據(jù)是Web應(yīng)用程序中常見的功能之一。在許多情況下，我們需要將數(shù)據(jù)導(dǎo)出為Excel文件，以便用戶可以在本地計算機(jī)上查看和編輯數(shù)據(jù)。在本篇博客中，我們將介紹如何使用JavaScript和XLSX.js將數(shù)據(jù)導(dǎo)出為Excel文件。

XLSX.js是一個JavaScript庫，它提供了一組API，可以將數(shù)據(jù)轉(zhuǎn)換為Excel文件。該庫支持多種數(shù)據(jù)源，包括數(shù)組、JSON對象和CSV文件。使用XLSX.js，我們可以輕松地將數(shù)據(jù)導(dǎo)出為Excel文件，并在Web應(yīng)用程序中提供下載鏈接。

在本篇博客中，我們將介紹如何使用XLSX.js將數(shù)據(jù)導(dǎo)出為Excel文件。我們將從安裝XLSX.js開始，然后介紹如何將數(shù)據(jù)轉(zhuǎn)換為Excel文件，并提供一個完整的示例，以便您可以輕松地將其集成到您的Web應(yīng)用程序中。

一、安裝XLSX.js

XLSX.js 是一個 JavaScript 庫，可用于在瀏覽器中讀取和寫入 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，您需要將其添加到您的項目中。您可以通過npm安裝XLSX.js，也可以直接從CDN中引入它。在本篇博客中，我們將使用CDN來安裝XLSX.js。

您可以通過以下代碼將XLSX.js添加到您的HTML文件中：

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.full.min.js"></script>

上面的代碼將從CDN中加載XLSX.js的最新版本。您可以將版本號更改為您需要的版本。現(xiàn)在，我們已經(jīng)安裝了XLSX.js，可以開始導(dǎo)出數(shù)據(jù)了。

二、將數(shù)據(jù)轉(zhuǎn)換為Excel文件

要將數(shù)據(jù)導(dǎo)出為Excel文件，我們需要將其轉(zhuǎn)換為XLSX.js支持的格式。XLSX.js支持多種數(shù)據(jù)格式，包括數(shù)組、JSON對象和CSV文件。在本篇博客中，我們將介紹如何將數(shù)組和JSON對象轉(zhuǎn)換為Excel文件。

將數(shù)組轉(zhuǎn)換為Excel文件

要將數(shù)組轉(zhuǎn)換為Excel文件，我們需要使用XLSX.utils.aoa_to_sheet方法將數(shù)組轉(zhuǎn)換為worksheet對象，然后將worksheet對象添加到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)換為一個包含兩個屬性的對象數(shù)組
	const exportData = this.tempData.map(item => {
	return {
	'Name': item[0],
	'Age': item[1]
	}

// 將數(shù)據(jù)轉(zhuǎn)換為 worksheet 對象
const worksheet = XLSX.utils.aoa_to_sheet(exportData);

// 將 worksheet 對象添加到 workbook 中
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

// 導(dǎo)出 Excel 文件
XLSX.writeFile(workbook, 'data.xlsx');

在上面的代碼中，我們定義了一個包含數(shù)據(jù)的二維數(shù)組tempData。然后，我們使用XLSX.utils.aoa_to_sheet方法將數(shù)據(jù)轉(zhuǎn)換為worksheet對象。接下來，我們創(chuàng)建一個新的workbook對象，并使用XLSX.utils.book_append_sheet方法將worksheet對象添加到workbook中。最后，我們使用XLSX.writeFile方法將workbook導(dǎo)出為Excel文件，并將其保存到本地文件系統(tǒng)中。

如果需要將Excel文件設(shè)置尾沒有表頭，即構(gòu)造的數(shù)據(jù)結(jié)構(gòu)沒有表頭，需要將header選項被設(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 對象
            const worksheet = XLSX.utils.aoa_to_sheet(exportData, { header: 0 });            // 將 worksheet 對象添加到 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對象轉(zhuǎn)換為Excel文件

要將JSON對象轉(zhuǎn)換為Excel文件，我們需要使用XLSX.utils.json_to_sheet方法將JSON對象轉(zhuǎn)換為worksheet對象，然后將worksheet對象添加到workbook中。以下是將JSON對象轉(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 對象
const worksheet = XLSX.utils.json_to_sheet(data);

// 將 worksheet 對象添加到 workbook 中
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

// 導(dǎo)出 Excel 文件
XLSX.writeFile(workbook, 'data.xlsx');

在上面的代碼中，我們定義了一個包含JSON對象的數(shù)組data。然后，我們使用XLSX.utils.json_to_sheet方法將JSON對象轉(zhuǎn)換為worksheet對象。接下來，我們創(chuàng)建一個新的workbook對象，并使用XLSX.utils.book_append_sheet方法將worksheet對象添加到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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論