前端下载字节流

最新推荐文章于 2025-03-27 15:41:21 发布

原创最新推荐文章于 2025-03-27 15:41:21 发布 · 529 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

这篇博客探讨了如何处理后端返回的Blob形式的字节流进行前端下载。主要内容包括前端设置Content-Type为multipart/form-data和responseType为blob的HTTP请求，使用Vue框架，封装一个通用的downloadBytes方法，将数据转换为blob并利用a标签实现文件下载。通过引入该方法，可以方便地下载后端提供的任意文件。

后端返回以blob形式的二进制字节流，前端请求时，header中需设置以下2个属性：

1.Content-Type:multipart/form-data

2.responseType:blob

前端使用Vue,代码如下

export function downloadCert(baseId){
  return request({
    url: `/certificate/${baseId}`,
    isBus: true,
    responseType: 'blob',
    contentType: 'multipart/form-data'
  });
}

设置以后，请求中会携带相关参数，请求为post

封装一个通用的下载方法（downloadBytes）

将后端返回的数据转为blob对象，创建a标签，将a标签url指向blob对象，触发a标签点击事件

/**
 * 下载后端返回的字节流文件
 * @param {字节流} res 
 * @param {文件名} fileName 
 */
export function downloadBytes(res, fileName){
  const blob = new Blob([res]);
  const url = URL.createObjectURL(blob);
  aLinkDownload(url, fileName);
}


/** a标签下载 */
export function aLinkDownload(url, fileName){
  const aLink = document.createElement("a");
  aLink.style.display = "none";
  aLink.href = url;
  aLink.setAttribute("download", fileName); // 下载的文件
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);
}

将通用方法引入使用页，传入后端返回数据和文件名即可下载。