vue实现文件导出

Vue 文件导出实现方法

使用 Blob 对象和 URL.createObjectURL

创建 Blob 对象并生成下载链接，适用于导出文本或二进制数据。

exportFile(content, fileName, type) {
  const blob = new Blob([content], { type })
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  link.click()
  window.URL.revokeObjectURL(url)
}

导出 CSV 文件

将数据转换为 CSV 格式并导出。

exportToCSV(data, fileName) {
  const csvContent = data.map(row => Object.values(row).join(',')).join('\n')
  this.exportFile(csvContent, `${fileName}.csv`, 'text/csv;charset=utf-8;')
}

导出 Excel 文件（使用 xlsx 库）

安装 xlsx 库后实现 Excel 导出功能。

npm install xlsx

import * as XLSX from 'xlsx'

exportToExcel(data, fileName) {
  const worksheet = XLSX.utils.json_to_sheet(data)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  XLSX.writeFile(workbook, `${fileName}.xlsx`)
}

导出 PDF 文件（使用 jsPDF 库）

安装 jsPDF 库后实现 PDF 导出功能。

npm install jspdf

import jsPDF from 'jspdf'

exportToPDF(content, fileName) {
  const doc = new jsPDF()
  doc.text(content, 10, 10)
  doc.save(`${fileName}.pdf`)
}

服务端文件导出

通过 API 请求获取文件数据并导出。

exportServerFile() {
  axios.get('/api/export', { responseType: 'blob' })
    .then(response => {
      const url = window.URL.createObjectURL(new Blob([response.data]))
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', 'file.pdf')
      document.body.appendChild(link)
      link.click()
    })
}

注意事项

• 确保导出的文件名包含正确的扩展名
• 处理大量数据时考虑分页或分块导出
• 服务端导出需要设置正确的响应头（Content-Disposition）
• 移动端设备可能需要特殊处理下载逻辑

这些方法覆盖了常见的文件导出需求，可以根据具体场景选择适合的实现方式。