当前位置：首页 > VUE

vue实现导出实例

2026-02-10 20:33:43VUE

Vue 实现导出功能的方法

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

使用 xlsx 库导出 Excel 文件

安装 xlsx 库：

npm install xlsx

在 Vue 组件中使用：

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const data = [
        ['Name', 'Age', 'Email'],
        ['John', 30, 'john@example.com'],
        ['Jane', 25, 'jane@example.com']
      ];

      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 导出文件

安装 FileSaver：

npm install file-saver

在 Vue 组件中使用：

vue实现导出实例

import { saveAs } from 'file-saver';

export default {
  methods: {
    exportToTextFile() {
      const content = 'This is the exported content';
      const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
      saveAs(blob, 'export.txt');
    }
  }
}

使用 vue-json-excel 插件

安装 vue-json-excel：

npm install vue-json-excel

在 Vue 组件中使用：

import JsonExcel from 'vue-json-excel';

export default {
  components: {
    JsonExcel
  },
  data() {
    return {
      jsonData: [
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 }
      ],
      fields: {
        'Name': 'name',
        'Age': 'age'
      },
      filename: 'users-data'
    }
  }
}

模板中使用：

vue实现导出实例

<download-excel
  :data="jsonData"
  :fields="fields"
  :name="filename + '.xls'">
  Download Excel
</download-excel>

导出为 CSV 格式

纯 JavaScript 实现：

export default {
  methods: {
    exportToCSV() {
      const data = [
        ['Name', 'Age', 'Email'],
        ['John', '30', 'john@example.com'],
        ['Jane', '25', 'jane@example.com']
      ];

      let csvContent = data.map(row => row.join(',')).join('\n');
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.setAttribute('download', 'export.csv');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}

导出当前页面为 PDF

使用 html2pdf.js：

npm install html2pdf.js

在 Vue 组件中使用：

import html2pdf from 'html2pdf.js';

export default {
  methods: {
    exportToPDF() {
      const element = document.getElementById('content-to-export');
      const opt = {
        margin: 1,
        filename: 'export.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      html2pdf().from(element).set(opt).save();
    }
  }
}