当前位置：首页 > news >正文

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

news 2025/6/26 23:52:54

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);}
};