快捷導(dǎo)航

詳解Vue如何使用xlsx庫(kù)導(dǎo)出Excel文件

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

第三方庫(kù)xlsx提供了強(qiáng)大的功能來(lái)處理Excel文件,它可以簡(jiǎn)化導(dǎo)出Excel文件這個(gè)過(guò)程,本文將為大家詳細(xì)介紹一下它的具體使用,需要的小伙伴可以了解下

1. 安裝依賴(lài)

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

npm install xlsx file-saver

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

接下來(lái)，創(chuàng)建一個(gè)Vue組件，該組件包含一個(gè)按鈕，點(diǎn)擊按鈕時(shí)會(huì)導(dǎo)出Excel文件。

<template>
  <div>
    <button @click="exportToExcel">導(dǎo)出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)建一個(gè)新的工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

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

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

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

3. 解釋代碼

模板部分 (<template>)

<template>
  <div>
    <button @click="exportToExcel">導(dǎo)出Excel</button>
  </div>
</template>

這里創(chuàng)建了一個(gè)簡(jiǎn)單的按鈕，當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，會(huì)觸發(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)建一個(gè)新的工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

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

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

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

導(dǎo)入庫(kù)

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

導(dǎo)入 xlsx 和 file-saver 庫(kù)。

定義數(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)建一個(gè)新的工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

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

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

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

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

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

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

生成Excel文件的二進(jìn)制字符串：使用 XLSX.write 方法將工作簿寫(xiě)入二進(jìn)制字符串。

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

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

完成了在Vue.js項(xiàng)目中導(dǎo)出Excel文件的功能。

以上就是詳解Vue如何使用xlsx庫(kù)導(dǎo)出Excel文件的詳細(xì)內(nèi)容，更多關(guān)于Vue xlsx導(dǎo)出Excel的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: