1. 文件为链接的时候

网上大多数是叫你使用a链接,初学者很多时候很懵,点击下载的时候直接就打开文件的链接了,根本没办法下载
a链接没错,通常需要处理一下,直接上代码

  const a_link = document.createElement("a");  // 生成一个a链接
  fetch(link)    // 括号里是文件链接
    .then((res) => res.blob())
     .then((blob) => {
          // 将链接地址字符内容转变成blob地址
       a_link.href = URL.createObjectURL(blob);
       console.log(a_link.href);
       a_link.download = name; //下载的文件的名字
       document.body.appendChild(a_link);
       a_link.click();
   });

注意:这样下载的文件要求文件链接遵循同源策略,也就是说,文件路径如果跨域会下载失败

2.文件不为链接,通过接口传参

	  axios  
        .get(`/common/File/Download?id=${id}`, {
          responseType: "blob",
        })
        .then((res) => {
          let url = URL.createObjectURL(res.data);
          var a = document.createElement("a");
          a.href = url; // 给a标签赋上下载地址
          a.download = `${name}`;
          a.style.display = "none"; // 让a标签不显示
          a.click(); // a标签自点击
          URL.revokeObjectURL(a.href);
        })
        .catch((_) => {});
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐