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

最新推荐文章于 2024-09-20 11:20:15 发布

shenzhipeng1023

最新推荐文章于 2024-09-20 11:20:15 发布

阅读量1.3k

点赞数 1

分类专栏： js代代码库文章标签： js附件下载 js下载blob blob文件下载 js文件下载文件下载

本文链接：https://blog.csdn.net/jason_renyu/article/details/135865973

版权

js代代码库专栏收录该内容

29 篇文章 0 订阅

订阅专栏

js下载文件方式有使用a标签的，也有直接用window.open的，还有用form表单的；这里采用的是a标签的下载方式，一种是url直接下载，另一种是文件的blob数据类型进行下载。
文件blob数据类型的获取一般是后端返回文件的二进制流，前端通过请求工具获取为blob数据类型进行下载；也可以这直接通过ajax或fetch等将url转化为blob数据类型，一些特殊的附件直接通过url下载，浏览器可能会将其打开，如：pdf。

话不多说直接上代码：

一、url直接下载文件

/**
 * 文件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数据类型下载文件

/**
 * 文件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);
  }
};