js使用网络请求下载文件-CSDN博客

本文链接：https://blog.csdn.net/qq_68155756/article/details/142101449

以下代码有两个方法：donwloadFileByUrl 和 donwloadFile 传入两个参数，文件地址和文件名


import axios from "axios";

// 传统a标签下载文件
export const donwloadFile = async (item) => {
  const a = document.createElement("a");
  a.style.display = "none";
  a.setAttribute('target', '_blank');
  a.download = item.fileName;
  a.href = item.filePath;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};


// 网络请求下载文件
export const donwloadFileByUrl = async (item) => {
  axios.get(item.filePath, {
    responseType: 'blob' // 拿到文件的blob数据
  }).then(async (blob) => {
    console.log(blob);
    const url = URL.createObjectURL(blob.data);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.setAttribute('target', '_blank');
    a.href = url;
    a.download = item.fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }).catch(error => {
    // 创建一个临时的a标签来触发下载
    donwloadFile(item)
  });
};

//使用：
donwloadFileByUrl({filePath:'https://xxxxxx/example.pdf',fileName:'example.pdf'})

推荐用第二个网络请求的方式下载文件，因为第一种方法a标签下载文件（如pdf）的时候会在浏览器打开而不是直接下载文件；并且第二种方法请求错误了会再次尝试执行第一种下载方法（如跨域）