vue实现文件导入导出

Vue 文件导入实现

使用 <input type="file"> 元素结合 FileReader API 实现文件读取。通过 @change 事件监听文件选择，获取文件对象后可用 FileReader 读取内容。

<template>
  <input type="file" @change="handleFileImport" />
</template>

<script>
export default {
  methods: {
    handleFileImport(event) {
      const file = event.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = e => {
        const content = e.target.result
        console.log('文件内容:', content)
        // 处理内容逻辑
      }
      reader.readAsText(file) // 根据需求使用 readAsDataURL/readAsArrayBuffer
    }
  }
}
</script>

对于 Excel 等特殊格式，可引入第三方库如 xlsx：

npm install xlsx

import * as XLSX from 'xlsx'

handleExcelImport(file) {
  const reader = new FileReader()
  reader.onload = e => {
    const data = new Uint8Array(e.target.result)
    const workbook = XLSX.read(data, { type: 'array' })
    const firstSheet = workbook.Sheets[workbook.SheetNames[0]]
    const jsonData = XLSX.utils.sheet_to_json(firstSheet)
    console.log(jsonData)
  }
  reader.readAsArrayBuffer(file)
}

Vue 文件导出实现

通过创建 Blob 对象生成文件，利用 URL.createObjectURL 生成下载链接。动态创建 <a> 标签触发下载。

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

// 使用示例
this.exportFile('导出内容', 'example.txt')

导出 Excel 文件示例：

exportExcel(data, fileName = 'export.xlsx') {
  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)
}

文件类型处理方案

CSV 文件处理可使用 papaparse 库：

npm install papaparse

import Papa from 'papaparse'

// CSV导入
Papa.parse(file, {
  complete: results => {
    console.log(results.data)
  }
})

// CSV导出
const csv = Papa.unparse(data)
this.exportFile(csv, 'data.csv', 'text/csv')

PDF 导出推荐使用 jsPDF：

npm install jspdf

import { jsPDF } from 'jspdf'

const doc = new jsPDF()
doc.text('PDF内容', 10, 10)
doc.save('document.pdf')

注意事项

文件操作涉及浏览器安全限制，某些操作可能需要用户显式触发。大文件处理建议使用分块读取技术避免内存问题。导出二进制文件时需要正确设置 MIME 类型，如：

• Excel: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
• Word: application/vnd.openxmlformats-officedocument.wordprocessingml.document
• PDF: application/pdf

跨浏览器兼容性需测试，Safari 对某些 Blob 类型的支持可能存在差异。移动端设备上文件操作的行为可能与桌面端不同。