利用iframe和a标签进行文件（批量）下载（注：有局限性）| Say so easy to code

利用iframe和a标签进行文件（批量）下载（注：有局限性）

---

动态生成iframe和a标签并利用其特性可以帮助我们实现下载文件的功能。但要注意的是，如果文件是pdf或者是浏览器默认支持打开预览类型文件，用这样的方式进行下载并不能阻止浏览器针对文件下载完成后进行的默认行为，并且如果前端是进行循环调用此方法，针对浏览器会默认打开预览的文件类型，会阻塞掉部分文件的下载。用这样的方式下载，最好清楚了解浏览器是否会针对这些成功下载的文件会直接打开预览。如果不会，那么就可以采用这样的方法，否则，请用文件流的方式进行下载。

• code

// 下载文件
const downloadFile = (url, type ) => {
  if (!type || type === "iframe") {
    // 创建iframe
    const iframe = document.createElement("iframe");
    iframe.style.display = "none"; 
    iframe.style.height = 0; 
    iframe.src = url;
    document.body.appendChild(iframe); 
    setTimeout(() => iframe.remove(), 5 * 60 * 1000);
  } else if (type === "a") {
    // 创建a 标签
    const a = document.createElement("a"); 
    const e = document.createEvent("MouseEvents"); // 创建鼠标事件对象
    e.initEvent("click", false, false); // 初始化事件对象
    a.href = url; // 设置下载地址
    a.download = ""; // 设置下载文件名
    a.dispatchEvent(e);
  }
};