当前位置：首页 > VUE

vue实现前端导出

2026-01-18 17:51:33VUE

Vue 实现前端导出的方法

使用 `xlsx` 库导出 Excel

安装 xlsx 库：

npm install xlsx

在 Vue 组件中引入并使用：

import * as XLSX from 'xlsx';

const 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');
};

使用 `file-saver` 和 `xlsx` 导出 CSV

安装依赖：

npm install file-saver xlsx

导出 CSV 的代码示例：

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

const exportToCSV = () => {
  const data = [
    ['Name', 'Age', 'Country'],
    ['Alice', 25, 'USA'],
    ['Bob', 30, 'UK']
  ];
  const csvContent = data.map(row => row.join(',')).join('\n');
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  saveAs(blob, 'export.csv');
};

使用 `html-to-image` 导出图片

安装 html-to-image：

npm install html-to-image

导出图片的示例：

import * as htmlToImage from 'html-to-image';

const exportToPNG = async () => {
  const element = document.getElementById('export-element');
  const dataUrl = await htmlToImage.toPng(element);
  const link = document.createElement('a');
  link.download = 'export.png';
  link.href = dataUrl;
  link.click();
};

使用 `jspdf` 导出 PDF

安装 jspdf：

npm install jspdf

导出 PDF 的代码：

import { jsPDF } from 'jspdf';

const exportToPDF = () => {
  const doc = new jsPDF();
  doc.text('Hello World!', 10, 10);
  doc.save('export.pdf');
};

使用原生 `Blob` 导出文本文件

无需额外库，直接使用浏览器 API：

const exportToTxt = () => {
  const content = 'This is a text file.';
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'export.txt';
  a.click();
  URL.revokeObjectURL(url);
};