前端vue文件流怎么下载

您可以使用axios库发送GET请求，将后端返回的文件流转化成Blob对象，然后通过创建URL的方式进行下载。代码示例如下：

axios({
  method: 'get',
  url: '/api/download', // 后端返回文件流的接口地址
  responseType: 'blob' // 指定响应的数据类型为二进制流
}).then(res => {
  const blob = new Blob([res.data])
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'file.xlsx' // 下载时的文件名称
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
})

其中，`link.click()` 触发元素的点击事件，弹出下载提示框；`window.URL.revokeObjectURL()` 释放URL对象，避免内存泄露。

相关问题

vue前端实现文件流下载

要实现文件流下载，需要先在后端设置好文件下载的接口，然后在前端通过ajax请求获取文件流，最后将流转换为文件进行下载。

以下是一个简单的示例代码：

// 后端接口示例代码（Node.js）
app.get('/download', function(req, res) {
  var file = 'path/to/file.pdf'; // 文件路径
  var filename = 'file.pdf'; // 下载后的文件名
  res.download(file, filename); // 下载文件
});

// 前端代码示例
axios({
  method: 'get',
  url: '/download',
  responseType: 'blob' // 指定响应数据类型为二进制流
}).then(function(response) {
  var blob = new Blob([response.data], { type: 'application/pdf' }); // 将二进制流转换为blob对象
  var link = document.createElement('a'); // 创建a标签
  link.href = window.URL.createObjectURL(blob); // 设置a标签的href属性为Blob URL
  link.download = 'file.pdf'; // 设置下载文件名
  link.click(); // 触发点击事件，进行下载
});

在上述代码中，通过axios发送get请求，设置响应数据类型为二进制流。在响应成功后，将二进制流转换为Blob对象，并创建一个a标签，将Blob URL赋值给a标签的href属性，设置下载文件名，最后触发a标签的点击事件，进行下载。

后端java 前端vue 文件流实现本地文件的下载功能

后端Java代码实现：

@RequestMapping("/download")
public void download(HttpServletResponse response) throws IOException {

    String fileName = "example.txt";
    File file = new File("D:\\" + fileName);

    response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
    response.setContentType("application/octet-stream");

    InputStream inputStream = new FileInputStream(file);
    OutputStream outputStream = response.getOutputStream();

    byte[] buffer = new byte[1024];
    int len;
    while ((len = inputStream.read(buffer)) > 0) {
        outputStream.write(buffer, 0, len);
    }
    inputStream.close();
    outputStream.close();
}

前端Vue代码实现：

<template>
  <div>
    <button @click="downloadFile">Download</button>
  </div>
</template>

<script>
import axios from 'axios'

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

在前端代码中，我们使用axios发送GET请求，设置responseType为blob，以便接收二进制文件流。然后创建一个URL对象，并在页面上创建一个a标签，设置其href为URL对象的值，并设置download属性为要下载的文件名，最后模拟点击a标签实现下载。