詳解Vue如何使用xlsx庫導出Excel文件

更新時間：2025年01月26日 10:34:52 作者：LCG元

第三方庫xlsx提供了強大的功能來處理Excel文件,它可以簡化導出Excel文件這個過程,本文將為大家詳細介紹一下它的具體使用,需要的小伙伴可以了解下

1. 安裝依賴

首先，需要安裝 xlsx 和 file-saver 這兩個庫。xlsx 用于生成Excel文件，而 file-saver 用于保存文件。

npm install xlsx file-saver

2. 創(chuàng)建Vue組件

接下來，創(chuàng)建一個Vue組件，該組件包含一個按鈕，點擊按鈕時會導出Excel文件。

<template>
  <div>
    <button @click="exportToExcel">導出Excel</button>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  name: 'ExportExcel',
  methods: {
    exportToExcel() {
      // 定義數(shù)據(jù)
      const data = [
        { name: 'John Doe', age: 30, email: 'john@example.com' },
        { name: 'Jane Smith', age: 25, email: 'jane@example.com' },
        { name: 'Sam Brown', age: 40, email: 'sam@example.com' }
      ];

      // 將數(shù)據(jù)轉(zhuǎn)換為工作表
      const worksheet = XLSX.utils.json_to_sheet(data);

      // 創(chuàng)建一個新的工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 生成Excel文件的二進制字符串
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 將二進制字符串轉(zhuǎn)換為Blob對象
      const dataBlob = new Blob([excelBuffer], { type: 'application/octet-stream' });

      // 使用FileSaver保存文件
      saveAs(dataBlob, 'data.xlsx');
    }
  }
};
</script>

3. 解釋代碼

模板部分 (<template>)

<template>
  <div>
    <button @click="exportToExcel">導出Excel</button>
  </div>
</template>

這里創(chuàng)建了一個簡單的按鈕，當用戶點擊按鈕時，會觸發(fā) exportToExcel 方法。

腳本部分 (<script>)

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  name: 'ExportExcel',
  methods: {
    exportToExcel() {
      // 定義數(shù)據(jù)
      const data = [
        { name: 'John Doe', age: 30, email: 'john@example.com' },
        { name: 'Jane Smith', age: 25, email: 'jane@example.com' },
        { name: 'Sam Brown', age: 40, email: 'sam@example.com' }
      ];

      // 將數(shù)據(jù)轉(zhuǎn)換為工作表
      const worksheet = XLSX.utils.json_to_sheet(data);

      // 創(chuàng)建一個新的工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 生成Excel文件的二進制字符串
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 將二進制字符串轉(zhuǎn)換為Blob對象
      const dataBlob = new Blob([excelBuffer], { type: 'application/octet-stream' });

      // 使用FileSaver保存文件
      saveAs(dataBlob, 'data.xlsx');
    }
  }
};

導入庫

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

導入 xlsx 和 file-saver 庫。

定義數(shù)據(jù)和方法

export default {
  name: 'ExportExcel',
  methods: {
    exportToExcel() {
      // 定義數(shù)據(jù)
      const data = [
        { name: 'John Doe', age: 30, email: 'john@example.com' },
        { name: 'Jane Smith', age: 25, email: 'jane@example.com' },
        { name: 'Sam Brown', age: 40, email: 'sam@example.com' }
      ];

      // 將數(shù)據(jù)轉(zhuǎn)換為工作表
      const worksheet = XLSX.utils.json_to_sheet(data);

      // 創(chuàng)建一個新的工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 生成Excel文件的二進制字符串
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 將二進制字符串轉(zhuǎn)換為Blob對象
      const dataBlob = new Blob([excelBuffer], { type: 'application/octet-stream' });

      // 使用FileSaver保存文件
      saveAs(dataBlob, 'data.xlsx');
    }
  }
};

定義數(shù)據(jù)：定義了一個包含多個對象的數(shù)組，每個對象代表一行數(shù)據(jù)。

將數(shù)據(jù)轉(zhuǎn)換為工作表：使用 XLSX.utils.json_to_sheet 方法將JSON數(shù)據(jù)轉(zhuǎn)換為工作表。

創(chuàng)建工作簿并添加工作表：使用 XLSX.utils.book_new 創(chuàng)建一個新的工作簿，然后使用 XLSX.utils.book_append_sheet 將工作表添加到工作簿中。

生成Excel文件的二進制字符串：使用 XLSX.write 方法將工作簿寫入二進制字符串。

將二進制字符串轉(zhuǎn)換為Blob對象：使用 Blob 構(gòu)造函數(shù)將二進制字符串轉(zhuǎn)換為Blob對象。

使用FileSaver保存文件：使用 saveAs 方法將Blob對象保存為Excel文件。

完成了在Vue.js項目中導出Excel文件的功能。

以上就是詳解Vue如何使用xlsx庫導出Excel文件的詳細內(nèi)容，更多關于Vue xlsx導出Excel的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: