js使用网络请求下载文件

admin2024-09-11  32

 以下代码有两个方法: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)的时候会在浏览器打开而不是直接下载文件;并且第二种方法请求错误了会再次尝试执行第一种下载方法(如跨域)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!