Vue3項目實現(xiàn)前端導出Excel的示例代碼

更新時間：2025年01月17日 08:36:12 作者：小鹿小陸

這篇文章主要介紹了Vue3項目實現(xiàn)前端導出Excel的示例,在vue3的項目中導出Excel表格的功能,可以借助xlsx庫來實現(xiàn),下面是詳細的操作步驟,需要的朋友可以參考下

一、安裝xlsx庫

首先我們需要在vue3的項目中安裝xlsx庫。可以使用npm 或者 pnpm來進行安裝。

npm install xlsx

pnpm install xlsx

如果需要設置excel的樣式，還需要安裝xlsx-style庫：

pnpm install xlsx-style

二、在vue組件中引入xlsx庫

需要引入xlsx庫才可以在代碼中使用方法和函數(shù)

import * as XLSX from 'xlsx';
// 如果需要設置樣式，則引入xlsx-style
// import XLSXStyle from 'xlsx-style';

三、定義導出實例方法

const exportExcel = () => {
    // 準備要導出的數(shù)據(jù)，這里假設你的數(shù)據(jù)存儲在dataArray中
    const dataArray = [
      { name: 'John', age: 30, address: 'New York' },
      { name: 'Jane', age: 25, address: 'London' },
      { name: 'Mike', age: 32, address: 'San Francisco' },
    ];
    // 將數(shù)據(jù)轉換為工作表
    const ws = XLSX.utils.json_to_sheet(dataArray);
 
    // 創(chuàng)建一個新的工作簿，并將工作表添加到工作簿中
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
 
    // 導出為Excel文件
    // 如果需要設置樣式，則使用XLSXStyle.writeFile(wb, '文件名.xlsx');
    XLSX.writeFile(wb, '表格數(shù)據(jù).xlsx');
}

四、完整代碼演示

<template>
    <div>
        <button @click="exportExcel">導出Excel</button>
        <!-- 你可以在這里添加其他內(nèi)容，如表格等 -->
    </div>
</template>
<script setup>
import { ref } from 'vue';
import * as XLSX from 'xlsx';

const exportExcel = () => {
    // 準備要導出的數(shù)據(jù)，這里假設你的數(shù)據(jù)存儲在dataArray中
    const dataArray = [
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Jane', age: 25, address: 'London' },
        { name: 'Mike', age: 32, address: 'San Francisco' },
    ];
    // 將數(shù)據(jù)轉換為工作表
    const ws = XLSX.utils.json_to_sheet(dataArray);

    // 創(chuàng)建一個新的工作簿，并將工作表添加到工作簿中
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    // 導出為Excel文件
    // 如果需要設置樣式，則使用XLSXStyle.writeFile(wb, '文件名.xlsx');
    XLSX.writeFile(wb, '表格數(shù)據(jù).xlsx');
};
</script>