当前位置：首页 > VUE

vue 实现导出

2026-03-27 15:18:28VUE

Vue 实现导出功能的方法

在 Vue 项目中实现导出功能通常涉及将数据导出为 Excel、CSV 或其他格式。以下是几种常见的实现方式：

使用 xlsx 库导出 Excel

安装 xlsx 库：

npm install xlsx --save

在 Vue 组件中使用：

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const data = [
        ['Name', 'Age', 'Country'],
        ['John', 25, 'USA'],
        ['Jane', 30, 'Canada']
      ];
      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');
    }
  }
}

使用 FileSaver 导出 CSV

安装 file-saver 库：

vue 实现导出

npm install file-saver --save

在 Vue 组件中使用：

import { saveAs } from 'file-saver';

export default {
  methods: {
    exportToCSV() {
      const csvContent = 'Name,Age,Country\nJohn,25,USA\nJane,30,Canada';
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      saveAs(blob, 'export.csv');
    }
  }
}

使用 html-to-excel 库导出 HTML 表格

安装 html-to-excel 库：

vue 实现导出

npm install vue-html-to-excel --save

在 Vue 组件中使用：

import VueHtmlToExcel from 'vue-html-to-excel';

export default {
  components: {
    VueHtmlToExcel
  },
  data() {
    return {
      json_data: [
        { Name: 'John', Age: 25, Country: 'USA' },
        { Name: 'Jane', Age: 30, Country: 'Canada' }
      ]
    };
  }
}

模板部分：

<vue-html-to-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  worksheet="My Worksheet"
  name="filename.xlsx"
>
  Export Excel
</vue-html-to-excel>

使用原生 JavaScript 导出

对于简单的导出需求，可以直接使用 JavaScript 的 Blob 对象：

export default {
  methods: {
    exportData() {
      const data = 'Name,Age,Country\nJohn,25,USA\nJane,30,Canada';
      const blob = new Blob([data], { type: 'text/csv' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'export.csv';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}

以上方法可以根据具体需求选择使用，xlsx 库适合复杂的 Excel 导出，FileSaver 适合简单的文件下载，html-to-excel 适合从 HTML 表格直接导出。

标签: vue