vue2使用xlsx依赖导出excel并封装组件

梓喻

已于 2025-02-26 08:35:29 修改

阅读量429

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： excel vue2导出excel 导出excel xlsx用法 xlsx导出excel

于 2025-02-25 22:18:08 首次发布

本文链接：https://blog.csdn.net/wzp20092009/article/details/145864085

vue 专栏收录该内容

35 篇文章

订阅专栏

1. 安装

npm install xlsx file-saver --save

2. 简单封装

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export function exportExcel(data, fileName) {
  return new Promise((resolve, reject) => {
    if (!data || !data.length) {
      return reject(new Error('No data to export'));
    }

    try {
      const worksheet = XLSX.utils.json_to_sheet(data);
      const workbook = XLSX.utils.book_new();

      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      const blob = new Blob(
      	[excelBuffer], 
      	{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
     );

      saveAs(blob, `${fileName || '数据表'}.xlsx`);

      resolve();
    } catch (error) {
      reject(error);
    }
  });
}

3. 调用

使用时传入已处理好的数据，这是一个数组，数据每个值是个对象，对象的属性会用在第一行作为名称，然后按顺序每一行是具体的值。
在这里插入图片描述
比如

[
	{ name: '大猫', age: 3 },
	{ name: '小猫', age: 1 },
]

4. 解说

直接去npm上看下xlsx使用方法。

求关注