前言

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

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

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

一、安裝XLSX.js

XLSX.js 是一個 JavaScript 庫，可用于在瀏覽器中讀取和寫入 Excel 文件。它支持各種 Excel 文件格式，包括 .xlsx、.xlsm、.xlsb 和 .xls。XLSX.js 可以在瀏覽器中直接使用，也可以在 Node.js 中使用。

使用 XLSX.js，你可以將數(shù)據(jù)導出到 Excel 文件中，或從 Excel 文件中導入數(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的最新版本。您可以將版本號更改為您需要的版本?，F(xiàn)在，我們已經(jīng)安裝了XLSX.js，可以開始導出數(shù)據(jù)了。

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

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

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

要將數(shù)組轉換為Excel文件，我們需要使用XLSX.utils.aoa_to_sheet方法將數(shù)組轉換為worksheet對象，然后將worksheet對象添加到workbook中。以下是將數(shù)組轉換為Excel文件的完整代碼示例：

import * as XLSX from "xlsx"
const tempData = [
  ['John Doe', 30],
  ['Jane Doe', 25],
  ['Bob Smith', 40]
];

// 將數(shù)組中的數(shù)據(jù)轉換為一個包含兩個屬性的對象數(shù)組
	const exportData = this.tempData.map(item => {
	return {
	'Name': item[0],
	'Age': item[1]
	}

// 將數(shù)據(jù)轉換為 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');

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

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

如果需要將Excel文件設置尾沒有表頭，即構造的數(shù)據(jù)結構沒有表頭，需要將header選項被設置為0。

            // 構造要導出的數(shù)據(jù)結構,不需要表頭
            const exportData = this.tempData.map(item => {
                return [
                    item[0],
                    item[1]
                ]
            })
            // 將數(shù)據(jù)轉換為 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');
            // 導出 Excel 文件
            XLSX.writeFile(workbook, 'test_read.xlsx');

將JSON對象轉換為Excel文件

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

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

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

總結

到此這篇關于如何使用JavaScript和XLSX.js將數(shù)據(jù)導出為Excel文件的文章就介紹到這了,更多相關XLSX.js數(shù)據(jù)導出Excel文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論