【Vue 】文件下载和导出功能的实现方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue 】文件下载和导出功能的实现方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在 Vue 项目中，实现文件下载和列表导出功能的方式有很多种，下面以两种常见方法为例进行说明。

方法一：使用服务端接口实现下载和导出

这种方式通常需要在服务端提供相应的接口，前端通过发送请求调用该接口来实现下载和导出功能。具体步骤如下：

在服务端实现下载和导出功能，并提供相应的接口，例如 /api/download 和 /api/export。
在 Vue 组件中通过 axios 或其他 HTTP 请求库发送 GET 或 POST 请求，与后端的 /api/download 或 /api/export 接口通信并获取文件流。
将文件流转换为 Blob 对象，并使用 URL.createObjectURL() 方法创建一个 URL 地址。
利用 window.open() 或标签触发下载或导出操作。
以下是代码示例：

// 文件下载

axios.get('/api/download').then(response => {
  const blob = new Blob([response.data])
  const url = URL.createObjectURL(blob)
  window.open(url)
})

// 列表导出

axios.post('/api/export', data).then(response => {
  const blob = new Blob([response.data])
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  document.body.appendChild(link)
  link.click()
})

方法二：前端直接生成文件并下载或导出

这种方式通常是在前端通过 JavaScript 代码直接生成文件，然后利用浏览器的下载或导出功能来实现。具体步骤如下：

在 Vue 组件中定义一个方法，用于生成文件的内容。
将文件内容转换为 Blob 对象，并使用 URL.createObjectURL() 方法创建一个 URL 地址。
利用 window.open() 或标签触发下载或导出操作。
以下是代码示例：

// 文件下载

const content = 'Hello, world'
const blob = new Blob([content], { type: 'text/plain' })
const url = URL.createObjectURL(blob)
window.open(url)

// 列表导出

const data = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
const fileName = 'users.csv'
const csvContent = 'id,name\n' + data.map(row => `${row.id},${row.name}`).join('\n')
const blob = new Blob([csvContent], { type: 'text/csv' })
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = fileName
document.body.appendChild(link)
link.click()