前端js接口接收二进制流转文件下载

在JavaScript前端开发中，如果你需要从接口接收二进制流并将其转换为文件，可以通过以下步骤来实现：

1. 使用Fetch API接收二进制流
首先，使用axios来向服务器请求数据。在响应中，你可以通过response.blob()方法获取到一个Blob对象，这个对象就代表了二进制流数据。

// 引入

import axios from 'axios'

// 使用
axios({

    url: `xxxxxxx`,

    method: 'get',

    responseType: 'blob',

  }

) 

  .then(response => response.blob())
  .then(blob => {
    // 此处已经获取到了Blob对象，后续可以将其转换为文件或进行其他操作
  })
  .catch(error => console.error('请求失败:', error));

2. 将Blob对象转换为文件
获取到Blob对象后，你可以直接使用它，或者将它转换为File对象。File对象是基于Blob，增加了一些文件相关的属性，如name（文件名）和lastModified（最后修改时间）等。

function blobToFile(blob, fileName){
    // Blob对象, 文件名
    const file = new File([blob], fileName, { type: blob.type, lastModified: Date.now() });
    return file;
}
// 示例：将Blob转换为文件
const myBlob =      // 这里假设是通过fetch获取的Blob对象
const myFile = blobToFile(myBlob, "example.pdf");

3. 使用文件
转换得到的File对象可以用于多种用途，例如使用HTML的<a>标签提供文件下载，或者使用FormData上传文件等。

文件下载示例

function downloadFile(file){
    // 创建一个隐藏的<a>标签
    let a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    // 利用URL.createObjectURL创建文件对象的URL
    let url = window.URL.createObjectURL(file);
    a.href = url;
    a.download = file.name; // 设置下载的文件名
    a.click();
    // 清理
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
}
// 使用上面的函数下载文件
downloadFile(myFile);

注意事项
确保你的接口URL正确，且服务器正确处理了CORS（跨源资源共享）问题。
转换Blob为File时，可以根据需要指定文件名和文件类型。
使用downloadFile函数时，请确保浏览器不会阻止弹出窗口，否则下载可能不会自动开始。
以上就是在JavaScript前端接收二进制流并转换为文件的基本步骤。

js前端接口接收二进制流转文件