npm install xlsx

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

<script setup>
import { ref } from 'vue';
import { utils, writeFile } from 'xlsx';

// 示例數(shù)據(jù)
const jsonData = ref([
  { name: '張三', age: 25, job: '前端開(kāi)發(fā)' },
  { name: '李四', age: 30, job: '后端開(kāi)發(fā)' }
]);

const exportToExcel = () => {
  // 1. 將JSON數(shù)據(jù)轉(zhuǎn)換為工作表
  const worksheet = utils.json_to_sheet(jsonData.value);
  // 2. 創(chuàng)建新工作簿并追加工作表
  const workbook = utils.book_new();
  utils.book_append_sheet(workbook, worksheet, '員工列表');
  // 3. 寫(xiě)入并下載文件
  writeFile(workbook, '員工數(shù)據(jù).xlsx');
};
</script>

npm install exceljs file-saver

<template>
  <button @click="handleExport">導(dǎo)出精美報(bào)表</button>
</template>

<script setup>
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

const tableData = [
  { id: 1, name: '張三', age: 25 },
  { id: 2, name: '李四', age: 30 }
];

const handleExport = async () => {
  // 創(chuàng)建工作簿
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('員工表');

  // 設(shè)置列定義和表頭
  worksheet.columns = [
    { header: 'ID', key: 'id', width: 10 },
    { header: '姓名', key: 'name', width: 20 },
    { header: '年齡', key: 'age', width: 10 }
  ];

  // 設(shè)置表頭樣式
  const headerRow = worksheet.getRow(1);
  headerRow.font = { bold: true, color: { argb: 'FFFFFF' } };
  headerRow.fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: '4F81BD' }
  };

  // 添加數(shù)據(jù)行
  tableData.forEach(item => worksheet.addRow(item));

  // 生成文件并下載
  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  saveAs(blob, '帶樣式的員工數(shù)據(jù).xlsx');
};
</script>

npm install vue-json-excel

import Vue from 'vue';
import JsonExcel from 'vue-json-excel';

Vue.component('downloadExcel', JsonExcel);

<template>
  <download-excel
    :data="jsonData"
    :fields="jsonFields"
    name="導(dǎo)出數(shù)據(jù).xlsx">
    <button>導(dǎo)出 Excel</button>
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      // 定義Excel表頭（中文）與數(shù)據(jù)字段的映射
      jsonFields: {
        '姓名': 'name',
        '年齡': 'age',
        '職位': 'job'
      },
      // 數(shù)據(jù)
      jsonData: [
        { name: '張三', age: 25, job: '前端開(kāi)發(fā)' },
        { name: '李四', age: 30, job: '后端開(kāi)發(fā)' }
      ]
    };
  }
};
</script>