Vue3项目实现前端导出Excel的示例代码

npm install xlsx

pnpm install xlsx

pnpm install xlsx-style

import * as XLSX from 'xlsx';
// 如果需要设置样式，则引入xlsx-style
// import XLSXStyle from 'xlsx-style';

const exportExcel = () => {
    // 准备要导出的数据，这里假设你的数据存储在dataArray中
    const dataArray = [
      { name: 'John', age: 30, address: 'New York' },
      { name: 'Jane', age: 25, address: 'London' },
      { name: 'Mike', age: 32, address: 'San Francisco' },
    ];
    // 将数据转换为工作表
    const ws = XLSX.utils.json_to_sheet(dataArray);
 
    // 创建一个新的工作簿，并将工作表添加到工作簿中
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
 
    // 导出为Excel文件
    // 如果需要设置样式，则使用XLSXStyle.writeFile(wb, '文件名.xlsx');
    XLSX.writeFile(wb, '表格数据.xlsx');
}

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

const exportExcel = () => {
    // 准备要导出的数据，这里假设你的数据存储在dataArray中
    const dataArray = [
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Jane', age: 25, address: 'London' },
        { name: 'Mike', age: 32, address: 'San Francisco' },
    ];
    // 将数据转换为工作表
    const ws = XLSX.utils.json_to_sheet(dataArray);

    // 创建一个新的工作簿，并将工作表添加到工作簿中
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    // 导出为Excel文件
    // 如果需要设置样式，则使用XLSXStyle.writeFile(wb, '文件名.xlsx');
    XLSX.writeFile(wb, '表格数据.xlsx');
};
</script>