当前位置：首页 > VUE

vue如何实现导出excle

2026-01-20 02:37:36VUE

Vue 导出 Excel 的方法

在 Vue 中导出 Excel 文件通常需要借助第三方库，以下是几种常见的方法：

使用 xlsx 库

安装 xlsx 库：

npm install xlsx

在 Vue 组件中使用：

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如何实现导出excle

npm install vue-json-excel

在 Vue 组件中使用：

import JsonExcel from 'vue-json-excel';

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

模板中使用：

vue如何实现导出excle

<download-excel
  :data="json_data"
  :fields="fields"
  name="export.xlsx">
  Download Excel
</download-excel>

使用 FileSaver.js 和 xlsx

结合 FileSaver.js 可以更灵活地控制文件保存：

npm install file-saver xlsx

示例代码：

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

export default {
  methods: {
    exportExcel() {
      const data = [
        { name: 'Alice', age: 25, country: 'USA' },
        { name: 'Bob', age: 30, country: 'UK' }
      ];
      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, 'export.xlsx');
    }
  }
}

后端生成 Excel 文件

如果需要从后端获取 Excel 文件：

export default {
  methods: {
    async downloadExcel() {
      try {
        const response = await axios.get('/api/export-excel', {
          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(error);
      }
    }
  }
}

以上方法可以根据具体需求选择使用，前端生成适合小型数据导出，大型数据建议使用后端生成。