当前位置：首页 > VUE

vue项目实现导出excel

2026-01-22 02:29:13VUE

Vue项目实现导出Excel的方法

使用xlsx库

安装xlsx库，这是一个功能强大的Excel处理库，支持读取和生成Excel文件。

npm install xlsx

在Vue组件中引入xlsx库，将数据转换为工作簿并导出为Excel文件。

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const data = [
        ['Name', 'Age', 'Country'],
        ['Alice', 25, 'USA'],
        ['Bob', 30, 'UK']
      ];
      const ws = XLSX.utils.aoa_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      XLSX.writeFile(wb, 'export.xlsx');
    }
  }
}

使用vue-json-excel插件

安装vue-json-excel插件，这是一个专门为Vue设计的Excel导出插件。

npm install vue-json-excel

在Vue中注册插件并使用组件，通过传递数据生成Excel文件。

import Vue from 'vue';
import JsonExcel from 'vue-json-excel';

Vue.component('downloadExcel', JsonExcel);

export default {
  data() {
    return {
      json_data: [
        { name: 'Alice', age: 25, country: 'USA' },
        { name: 'Bob', age: 30, country: 'UK' }
      ],
      fields: {
        name: 'Name',
        age: 'Age',
        country: 'Country'
      },
      filename: 'export.xlsx'
    };
  }
}

在模板中使用组件。

<download-excel
  :data="json_data"
  :fields="fields"
  :name="filename">
  Download Excel
</download-excel>

使用axios和Blob对象

通过后端API获取数据，使用Blob对象和URL.createObjectURL方法实现前端下载。

import axios from 'axios';

export default {
  methods: {
    async exportExcel() {
      try {
        const response = await axios.get('/api/export', { responseType: 'blob' });
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'export.xlsx');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('Export failed:', error);
      }
    }
  }
}

使用FileSaver.js

安装FileSaver.js库，用于处理文件保存操作。

npm install file-saver

结合xlsx库和FileSaver.js实现Excel导出。

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

export default {
  methods: {
    exportToExcel() {
      const data = [
        { name: 'Alice', age: 25, country: 'USA' },
        { name: 'Bob', age: 30, country: 'UK' }
      ];
      const ws = XLSX.utils.json_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'export.xlsx');
    }
  }
}

自定义样式和格式

使用xlsx库的API自定义Excel文件的样式和格式。

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportStyledExcel() {
      const data = [
        ['Name', 'Age', 'Country'],
        ['Alice', 25, 'USA'],
        ['Bob', 30, 'UK']
      ];
      const ws = XLSX.utils.aoa_to_sheet(data);
      ws['A1'].s = { font: { bold: true, color: { rgb: 'FF0000' } } };
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      XLSX.writeFile(wb, 'styled_export.xlsx');
    }
  }
}

vue项目实现导出excel