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

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使用方法。

求关注