vue实现下载文件流完整前后端代码

下面是使用Vue实现下载文件流的前后端代码攻略。

前端代码

前端代码主要使用了Vue的axios库实现文件下载。示例如下：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    async downloadFile() {
      const response = await axios.get('/api/download', { responseType: 'blob' })
      const filename = 'example.txt'
      const url = window.URL.createObjectURL(new Blob([response.data]))
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', filename)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

上述代码中，我们在按钮点击事件中发送了一个 GET 请求给服务器，将返回的 Response 设置为 blob 类型，并将该 Blob 对象存入 URL 实例中。接着，我们创建一个链接并设置文件名，将该链接附加在 body 上并模拟点击，然后将该链接从 body 中删除。这样就可以实现文件下载的效果。

后端代码

后端代码主要是使用了Node.js的fs模块来读取文件流，并通过设置 Content-Disposition 响应头将其返回给前端。以下是后端代码示例：

const express = require('express')
const app = express()
const fs = require('fs')

app.get('/api/download', (req, res) => {
  const filename = 'example.txt'
  const path = `./${filename}`

  const stats = fs.statSync(path)
  const fileSize = stats.size
  const fileStream = fs.createReadStream(path)

  res.setHeader('Content-disposition', `attachment; filename=${filename}`)
  res.setHeader('Content-type', 'application/octet-stream')
  res.setHeader('Content-Length', fileSize)

  fileStream.pipe(res)
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`App listening on port ${port}!`)
})

上述代码中，我们使用 createReadStream 方法读取本地文件，然后将其作为响应参数直接传递给 res 实例。同时，我们设置了响应头的 Content-disposition 来告诉浏览器如何下载文件。

示例

下面是一个基于上述两部分代码实现的 Vue 示例：

首先，我们需要在 package.json 中添加以下依赖项：

{
  "dependencies": {
    "axios": "^0.21.1",
    "vue": "^2.6.12",
    "vue-cli-plugin-axios": "^0.1.3",
    "vue-router": "^3.5.1"
  }
}

然后，我们创建一个简单的 Express App：

const express = require('express')
const app = express()
app.use(express.static(__dirname + '/public'))
const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`App listening on port ${port}`)
})

然后，在/public文件夹下创建一个包含上述前端示例代码的 Vue 组件：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    async downloadFile() {
      const response = await axios.get('/api/download', { responseType: 'blob' })
      const filename = 'example.txt'
      const url = window.URL.createObjectURL(new Blob([response.data]))
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', filename)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

最后，在 server.js 文件夹下添加一个 API 路由，并在其中添加上述后端代码示例：

const express = require('express')
const app = express()
const fs = require('fs')

app.get('/api/download', (req, res) => {
  const filename = 'example.txt'
  const path = `./${filename}`

  const stats = fs.statSync(path)
  const fileSize = stats.size
  const fileStream = fs.createReadStream(path)

  res.setHeader('Content-disposition', `attachment; filename=${filename}`)
  res.setHeader('Content-type', 'application/octet-stream')
  res.setHeader('Content-Length', fileSize)

  fileStream.pipe(res)
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`App listening on port ${port}!`)
})

在浏览器中输入"http://localhost:8080/"，点击下载文件按钮，就可以下载 example.txt 文件了。

以上就是完整的Vue实现下载文件流的前后端代码攻略，如果您有其他问题或需要更多详细信息，请随时向我提出。