前端点击下载压缩包zip,后端返回文件流

接口请求带responseType: ‘blob’

export const fileDownloadZip = (params) => {
  return request({
    url: '/file/downloadZip',
    method: 'post',
    data: params,
    responseType: 'blob',
  })
}

调用接口下载压缩包

fileDownloadZip({ paths: JSON.stringify(params) }).then(res => {
  const blob = new Blob([res], { type: "application/zip" });
  const fileName = `文件1`;
  if ("download" in document.createElement("a")) {
    // 非IE下载
    const elink = document.createElement("a");
    elink.download = fileName;
    elink.style.display = "none";
    elink.href = window.URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    window.URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink);
  } else {
    // IE10+下载
    navigator.msSaveBlob(blob, fileName);
  }
})
.catch((err) => {
  console.log(err);
});

你可能感兴趣的:(前端,前端,javascript,vue.js)