js直接下载附件和通过blob数据类型下载文件

jason_renyu2024-01-27 15:33

js下载文件方式有使用a标签的，也有直接用window.open的，还有用form表单的；这里采用的是a标签的下载方式，一种是url直接下载，另一种是文件的blob数据类型进行下载。

文件blob数据类型的获取一般是后端返回文件的二进制流，前端通过请求工具获取为blob数据类型进行下载；也可以这直接通过ajax或fetch等将url转化为blob数据类型，一些特殊的附件直接通过url下载，浏览器可能会将其打开，如：pdf。

话不多说直接上代码：

一、url直接下载文件

javascript 复制代码

/**
 * 文件url直接下载
 * @param {String} path 下载链接
 * @param {*} fileName 下载文件名称, 无文件名默认取url后面名称
 */
const downloadUrl = (path, fileName) => {
  if(!path) return;
  const a = document.createElement("a");
  a.setAttribute("href", path);
  a.setAttribute("download", fileName);
  a.setAttribute("target", "_blank");
  const clickEvent = document.createEvent("MouseEvents");
  clickEvent.initEvent("click", true, true);
  a.dispatchEvent(clickEvent);
};

二、文件blob数据类型下载文件

javascript 复制代码

/**
 * 文件blob数据格式进行下载
 * @description 文件下载
 * @param {String} blob  文件blob数据
 * @param {String} fileName 下载文件名
 */
const downloadBlobUrl = function (blob, fileName = "") {
  if (!blob) return;
  if ("download" in document.createElement("a")) {
    // 非IE下载
    let link = document.createElement("a");
    if (window.URL) {
      link.href = window.URL.createObjectURL(blob);
    } else {
      link.href = window.webkitURL.createObjectURL(blob);
    }
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    link.remove();
  } else {
    // IE10+下载
    navigator.msSaveBlob(blob, fileName);
  }
};

需要的上方自取，有疑问或者其他问题欢迎评论沟通，也可加wx沟通账号与用户名一致