vue实现前端excel导出的三种方法实现与对比总结

npm install xlsx

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

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

// 示例数据
const jsonData = ref([
  { name: '张三', age: 25, job: '前端开发' },
  { name: '李四', age: 30, job: '后端开发' }
]);

const exportToExcel = () => {
  // 1. 将JSON数据转换为工作表
  const worksheet = utils.json_to_sheet(jsonData.value);
  // 2. 创建新工作簿并追加工作表
  const workbook = utils.book_new();
  utils.book_append_sheet(workbook, worksheet, '员工列表');
  // 3. 写入并下载文件
  writeFile(workbook, '员工数据.xlsx');
};
</script>

npm install exceljs file-saver

<template>
  <button @click="handleExport">导出精美报表</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 () => {
  // 创建工作簿
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('员工表');

  // 设置列定义和表头
  worksheet.columns = [
    { header: 'ID', key: 'id', width: 10 },
    { header: '姓名', key: 'name', width: 20 },
    { header: '年龄', key: 'age', width: 10 }
  ];

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

  // 添加数据行
  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, '带样式的员工数据.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="导出数据.xlsx">
    <button>导出 Excel</button>
  </download-excel>
</template>

<script>
export default {
  data() {
    return {
      // 定义Excel表头（中文）与数据字段的映射
      jsonFields: {
        '姓名': 'name',
        '年龄': 'age',
        '职位': 'job'
      },
      // 数据
      jsonData: [
        { name: '张三', age: 25, job: '前端开发' },
        { name: '李四', age: 30, job: '后端开发' }
      ]
    };
  }
};
</script>