前端vue文件流怎么下载

您可以通过创建一个 blob 对象，将文件的二进制码打包到 blob 中，然后使用 URL.createObjectURL() 方法创建一个链接，将这个链接赋值给 a 标签的 href 属性，即可实现前端下载。具体实现可以参考以下代码：

//文件流转换为Blob对象
let blob = new Blob([data], { type: 'application/octet-stream' });
//创建URL对象，指定类型为二进制流
let url = window.URL.createObjectURL(blob);
//创建a标签，指定下载文件名称、下载链接
let link = document.createElement('a');
link.href = url;
link.download = fileName;
//将a标签添加到body中，并自动点击进行下载
document.body.appendChild(link);
link.click();
//释放创建的URL对象
window.URL.revokeObjectURL(url);

注意：data 是文件流的二进制码，fileName 是文件下载后的名称。

相关问题

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标签实现下载。