当前位置：首页 > VUE

vue实现导入导出

2026-01-17 07:23:04VUE

Vue 实现导入功能

使用 input 标签的 type="file" 属性实现文件选择，通过 FileReader API 读取文件内容。

<template>
  <input type="file" @change="handleFileImport" accept=".xlsx,.csv,.json" />
</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) // 或 readAsArrayBuffer 等
    }
  }
}
</script>

对于 Excel 文件处理，推荐使用 xlsx 库：

npm install xlsx

import * as XLSX from 'xlsx'

handleFileImport(event) {
  const file = event.target.files[0]
  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 生成下载链接。

<template>
  <button @click="exportToCSV">导出CSV</button>
</template>

<script>
export default {
  methods: {
    exportToCSV() {
      const data = [
        ['姓名', '年龄', '城市'],
        ['张三', 25, '北京'],
        ['李四', 30, '上海']
      ]

      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.download = 'data.csv'
      link.click()
    }
  }
}
</script>

对于 Excel 导出：

exportToExcel() {
  const data = [
    { name: '张三', age: 25, city: '北京' },
    { name: '李四', age: 30, city: '上海' }
  ]

  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, 'data.xlsx')
}

高级功能实现

实现带样式的 Excel 导出：

const ws = XLSX.utils.aoa_to_sheet([
  ["姓名", "年龄", "城市"],
  ["张三", 25, "北京"]
])
ws['!cols'] = [{wch:10}, {wch:5}, {wch:8}] // 列宽
XLSX.writeFile({ Sheets: { '数据': ws }, SheetNames: ['数据'] }, 'styled.xlsx')

实现大数据量分块导出：

async function exportLargeData() {
  const chunkSize = 10000
  let offset = 0
  const workbook = XLSX.utils.book_new()

  while(offset < totalRecords) {
    const chunk = await fetchData(offset, chunkSize)
    const ws = XLSX.utils.json_to_sheet(chunk)
    XLSX.utils.book_append_sheet(workbook, ws, `数据_${offset/chunkSize+1}`)
    offset += chunkSize
  }

  XLSX.writeFile(workbook, 'large_data.xlsx')
}

注意事项

文件类型验证应在导入前进行：

const validTypes = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
if (!validTypes.includes(file.type)) {
  alert('请上传有效的Excel文件')
  return
}

处理中文编码问题：

const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' })

服务器端导出实现示例（Node.js）：

vue实现导入导出

router.get('/export', (req, res) => {
  const workbook = XLSX.utils.book_new()
  const worksheet = XLSX.utils.json_to_sheet(data)
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

  res.setHeader(
    'Content-Type',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  )
  res.setHeader('Content-Disposition', 'attachment; filename=export.xlsx')

  const buffer = XLSX.write(workbook, { type: 'buffer' })
  res.end(buffer)
})

标签: vue