根据URL下载

先获取文件流再下载

动态创建a标签的形式下载

使用fetch封装,方便使用(httprqs...请求也是同理)

此方法兼容绝大部分后缀下载

//.txt
let url = ''//下载地址
let name = ''//下载对象的名称

const link = document.createElement("a");
fetch(url)
  .then(res => res.blob())
  .then(blob => {
    // 将链接地址字符内容转变成blob地址
    link.href = URL.createObjectURL(blob);
    link.download = "";
    link.setAttribute("download", name);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });

其他下载方式

.png .jpg .jpeg

动态创建canvas实现图片下载

//.png .jpg .jpeg
let url = ''//下载地址
let name = ''//下载对象的名称

const image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.src = url;
image.onload = () => {
    const canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    const context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    canvas.toBlob(blob => {
      const imgUrl = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.download = name || "未命名图片";
      a.href = imgUrl;
      a.click();
      a.remove();
      URL.revokeObjectURL(imgUrl);
    });
};

.pdf

动态创建a标签的形式下载

//.pdf
let url = ''//下载地址
let name = ''//下载对象的名称

const blob = new Blob([url]);
const fileName = name;
if ("download" in document.createElement("a")) {
  // 非IE下载
  const elink = document.createElement("a");
  elink.download = fileName;
  elink.style.display = "none";
  elink.href = URL.createObjectURL(blob);
  document.body.appendChild(elink);
  elink.click();
  URL.revokeObjectURL(elink.href); // 释放URL 对象
  document.body.removeChild(elink);
} else {
  // IE10+下载
  navigator.msSaveBlob(blob, fileName);
}

.zip .xls .xlsx .ppt .pptx .doc .docx

动态创建iframe标签的形式下载

// .zip .xls .xlsx .ppt .pptx .doc .docx
let url = ''//下载地址

var elemIF = document.createElement("iframe");
elemIF.src = url;
elemIF.style.display = "none";
document.body.appendChild(elemIF);

直接打开下载

//直接打开下载
window.open(url, name)

根据文件流下载

省。。。。。