当前位置：首页 > VUE

使用vue实现excel下载

2026-01-21 16:15:34VUE

使用 Vue 实现 Excel 下载

在 Vue 中实现 Excel 下载功能，通常需要借助第三方库如 xlsx 或 file-saver。以下是两种常见方法：

方法一：使用 `xlsx` 和 `file-saver` 库

安装依赖库：

npm install xlsx file-saver --save

在 Vue 组件中引入库并实现下载：

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

export default {
  methods: {
    downloadExcel() {
      // 示例数据
      const data = [
        ['Name', 'Age', 'Country'],
        ['Alice', 25, 'USA'],
        ['Bob', 30, 'UK']
      ];

      // 创建工作簿
      const workbook = XLSX.utils.book_new();
      const worksheet = XLSX.utils.aoa_to_sheet(data);
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 生成 Excel 文件
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

      // 下载文件
      saveAs(blob, 'example.xlsx');
    }
  }
};

方法二：使用 `axios` 下载后端生成的 Excel 文件

如果 Excel 文件由后端生成，可以通过 axios 下载：

import axios from 'axios';

export default {
  methods: {
    downloadExcel() {
      axios({
        url: '/api/download-excel',
        method: 'GET',
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'example.xlsx');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    }
  }
};

方法三：使用纯前端生成 CSV 文件

对于简单需求，可以生成 CSV 文件：

export default {
  methods: {
    downloadCSV() {
      const csvContent = 'Name,Age,Country\nAlice,25,USA\nBob,30,UK';
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'example.csv');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};