Vue轻松实现Excel导出：xlsx组件使用指南（含完整代码示例）

最新推荐文章于 2025-06-12 15:35:50 发布

sg_knight

最新推荐文章于 2025-06-12 15:35:50 发布

阅读量444

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端 # vue 文章标签： vue.js excel 前端 javascript 导出

本文链接：https://blog.csdn.net/sg_knight/article/details/147940978

前端同时被 2 个专栏收录

95 篇文章

订阅专栏

vue

22 篇文章

订阅专栏

在日常开发中，Excel导出是管理系统的高频需求。本文手把手教你如何在Vue项目中快速实现Excel导出功能，支持复杂表格样式，并附赠性能优化方案！

一、5分钟快速上手

1. 安装核心依赖

npm install xlsx file-saver --save

2. 基础导出模板（复制即用）

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

<script>
import { saveAs } from 'file-saver';
import XLSX from 'xlsx';

export default {
  methods: {
    exportExcel() {
      // 示例数据
      const data = [
        ['姓名', '年龄', '部门'],
        ['张三', 28, '技术部'],
        ['李四', 32, '产品部']
      ];
      
      // 创建工作簿
      const ws = XLSX.utils.aoa_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '员工信息');
      
      // 生成文件并保存
      const buffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([buffer], { type: 'application/octet-stream' });
      saveAs(blob, '员工列表.xlsx');
    }
  }
}
</script>

二、高级功能拓展

1. 复杂数据结构处理

// 对象数组转换（自动匹配表头）
const employees = [
  { name: '王五', age: 25, department: '设计部' },
  { name: '赵六', age: 30, department: '市场部' }
];

const ws = XLSX.utils.json_to_sheet(employees);

2. 多Sheet页导出

const ws1 = XLSX.utils.aoa_to_sheet(/* 数据源1 */);
const ws2 = XLSX.utils.aoa_to_sheet(/* 数据源2 */);

const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws1, '第一季度');
XLSX.utils.book_append_sheet(wb, ws2, '第二季度');

3. 表格样式调整（需xlsx-style扩展版）

// 设置列宽
ws['!cols'] = [{ width: 20 }, { width: 15 }, { width: 25 }];

// 添加标题样式
const titleCell = { v: '员工统计表', s: { font: { bold: true, sz: 18 }, alignment: { horizontal: 'center' } } };

三、性能优化方案

1. 大数据量分块处理

// 使用Web Worker处理百万级数据
const worker = new Worker('./excel.worker.js');
worker.postMessage(largeData);

2. 前端分页导出

let currentPage = 1;
const pageSize = 10000;

function exportByPage() {
  const pageData = getData(currentPage, pageSize);
  // 追加到现有文件...
  currentPage++;
}

3. 二进制流加速

// 使用Stream模式处理文件
const writer = XLSX.stream.to_csv(wb, { FS: ',' });
const readable = new ReadableStream({ ... });

四、常见问题排雷

1. 中文文件名乱码

saveAs(blob, '\uFEFF' + encodeURIComponent('中文名称.xlsx'));

2. 日期格式处理

// 转换日期为Excel数字格式
XLSX.SSF.format('yyyy-mm-dd', new Date());

3. 浏览器兼容方案

// IE兼容处理
if (window.navigator.msSaveBlob) {
  navigator.msSaveBlob(blob, filename);
}

五、最佳实践建议

数据预处理：在服务端完成复杂计算，前端只做格式转换
内存管理：及时清理不再使用的Worksheet对象
错误捕获：添加try-catch处理可能的导出异常
进度提示：添加加载动画提升用户体验

扩展阅读：
• SheetJS官方文档

• Vue性能优化指南

掌握这些技巧后，相信你能轻松应对各种Excel导出需求。如果遇到实现难题，欢迎在评论区留言交流！

新时代农民工