前端下载字节流

后端返回以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);
}

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