首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue xlsx实现Excel导出

Vue使用xlsx组件轻松实现Excel导出的完整代码

2025-05-14 10:12:45 作者：sg_knight

在日常开发中,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处理可能的导出异常
进度提示：添加加载动画提升用户体验

掌握这些技巧后，相信你能轻松应对各种Excel导出需求。

到此这篇关于Vue使用xlsx组件轻松实现Excel导出的完整示例代码的文章就介绍到这了,更多相关Vue xlsx实现Excel导出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！