关于a标签下载文件变打开的解决方案

<a href="//:download-url.com" download>下载文件</a>

一般来说，下载通过以上写法可以实现下载。但是download属性本身存在一些限制或者系统的限制，会导致该属性失效，转而改为打开文件。

仅适用于同源URL（同协议，同端口，同域名，什么是同源URL）
如果是非同源url，可以使用blob: URLs 和 data: URLs

一、基础解决方案

function triggerADownload(url, fileName = '文件') {var a = document.createElement('a')document.body.appendChild(a)a.href = urla.download = fileNamea.click()document.body.removeChild(a);
}/*** 考虑兼容性，替换async、await，fetch*/
async function createBlobOrDataUrl (url) {var response = await fetch(url)var blob = await response.blob();return URL.createObjectURL(blob);
}triggerADownload(createBlobOrDataUrl("//:download-url.com"), fileName)

原生写法

// 处理下载变打开问题
exportFile = function (url) {let xhr = new XMLHttpRequest();xhr.open("GET", url);xhr.setRequestHeader("Content-Type", "application/json;charset=utf-8");xhr.responseType = "blob"; // 返回类型blobxhr.send(); // 发送ajax请求xhr.onreadystatechange = function () {// 监听属性xhr.readyState每次变化时会触发if (xhr.readyState === 4) {// 响应已返回var endspilt = url.lastIndexOf("?");if (endspilt != -1)var filename = decodeURI(url.substring(url.lastIndexOf("/") + 1, endspilt));else var filename = decodeURI(url.substring(url.lastIndexOf("/") + 1));// 将`blob`对象转化成一个可访问的`url`let dataUrl = window.URL.createObjectURL(new Blob([xhr.response]));let link = document.createElement("a");link.style.display = "none";link.href = dataUrl;link.setAttribute("download", filename);document.body.appendChild(link);link.click();URL.revokeObjectURL(link.href)   //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。document.body.removeChild(link);} else {console.error(xhr.response);}};
};

写法二：

/*** 保存文件* @param {string|Blob|Uint8Array} txt* @param {string} [name]* @param {boolean} [newWindow]*/
export function download(txt, name, newWindow) {if (/^(data|blob|https?):/.test(txt)) {let pms = Promise.reject();if (isMobileDownload() ? !/^https?:/.test(txt) : !/^blob:/.test(txt) && window.fetch) {pms = fetch(txt).then((res) => res.blob()).then((blob) => {return download(new Blob([blob], {type: "application/octet-stream"}), name, newWindow);});}return pms.catch(() => {var a = document.createElement("a");a.href = txt;if (newWindow) {a.target = "_blank";a.rel = "noopener noreferrer";}a.download = name;a.click();});}if (txt instanceof Blob) {let pms = Promise.reject();if (isMobileDownload()) {const s = encodeQuery({uuid: localStorage.getItem("_g_uuid"), name, size: txt.size});pms = fetch("api/download?" + s, {method: "POST", body: txt}).then((x) => {console.log(x);if (x.status == 200) return location.origin + `/api/download?${s}`;return Promise.reject();});}return pms.catch(() => {let url = URL.createObjectURL(txt);setTimeout(function () {URL.revokeObjectURL(url);}, 1000);return url;}).then((url) => download(url, name, newWindow));}return download(new Blob([txt]), name);
}async toDealUrl(Url) {let convertedUrl = startUrl.replace("http:", "https:"); // 1.http替换为httpslet fileName = decodeURI(convertedUrl).match(/[^/]+(?!.*\/)/gi)[0]; // 2.转为bloblet response = await fetch(convertedUrl);let blob = await response.blob();download(blob, fileName);
},

fileSaver第三方库

import {saveAs} from 'file-saver'
saveAs(url, fileName)

二、特殊情况的处理

文件名的处理

如果接口没有返回fileName，可以通过正则截取url中的文件名

let fileName = url.match(/[^/]+(?!.*\/)/gi)[0]

注意：如果url中有中文字符，则会被转码，为了显示正确的文件名，需要其进行转码。

let fileName = decodeURI(url).match(/[^/]+(?!.*\/)/gi)[0]

iOS中PDF的处理

目前无解，无论a标签还是生成blob，都会在浏览器中打开。（iOS14.6及以前）

强烈建议在iOS中保持原url，如果使用生成的url，如果再刷新打开的页面则会报错。

function createUrl (url) {let downloadUrl = urlif(!isIos()) {// 保持downloadUrl} else {downloadUrl = createBlobOrDataUrl(downloadUrl)}return downloadUrl
}
triggerADownload(createUrl("//:download-url.com"), fileName)

Android浏览器的处理

vivo自带浏览器中的处理

vivo自带浏览器使用blob url下载txt，pdf文件，会显示下载失败。直接使用a标签。

<a href="//:download-url.com" download>下载文件</a>

Android QQ浏览器的处理

经测试发现，如果是txt文件，不论是原URL还是生成的blob url都会在浏览器中打开当前文件。（暂时没有找到解决方案）

关于a标签下载文件变打开的解决方案相关推荐

JS a标签下载文件而不打开文件
// 下载文件 function downfile(obj) {var url = $(obj).attr("files");//url = "http://10.19. ...
解决a标签下载网络图片直接打开的问题，通过浏览器下载网络文件
因为公司用的分布式文件系统上传文件后返回的是 http文件路径,当文件是图片是,用a标签下载会直接打开而不是下载,所以找了下怎么通过浏览器下载远程服务器上的图片.网上大部分都是后台代码,现在把前端后台 ...
使用a标签下载文件，浏览器会直接打开解决方案
使用a标签下载文件,浏览器会直接打开解决方案背景一.HTML中的a标签实现点击下载二.即使使用a标签的download属性,chrome浏览器还是会打开三.解决方案解决方案一:使用ajax请 ...
nginx打开网页下载php,nginx,_nginx 访问localhost老是下载文件不能打开网页什么情况？，nginx - phpStudy...
nginx 访问localhost老是下载文件不能打开网页什么情况? nginx sites-available文件里的default已经修改过root 路径了. 但是访问localhost的时候总是 ...
js下载文件及前端使用a标签下载文件download属性失效问题
通常下载通过document.createElement创建虚拟a标签 function downloadFileUrl(val, url, fileName) {if (isVal) return ...
微信小程序关于下载文件、打开文件预览文件(wx.downloadFile和wx.openDocument)
下载文件并打开文件示例API wx.downloadFile({url: 'https://example.com/audio/123', //仅为示例,并非真实的资源success (res) { ...
a标签下载文件，js/jq创建a标签导出Excel文件
a标签下载文件,js/jq 创建a标签导出Excel文件 1.设置dom(html) <button type="button" class="layui-btn ...
Java下载文件记事本打开不换行问题
Java下载文件记事本打开不换行问题,其他编辑器可以换行: 原因是下载的内容用的是\n,而win记事本是用的\r\n java 将\n转换为\r\n String script = editText. ...
超赞！微信内无法下载文件的三种解决方案
大家在微信内打开文件下载链接的时候是不是经常会遇到下面的这种情况?这是说明微信已经拦截你的网站,基本是无法再恢复访问了. 那么当我们遇到以上情况的时候怎么办呢?如果想直接恢复微信内直接打开是不可能的, ...
(JSP)关于手机端（尤其是苹果手机）pdf文件无法打开的解决方案
(JSP)关于手机端(尤其是苹果手机)pdf文件无法打开的解决方案参考文章: (1)(JSP)关于手机端(尤其是苹果手机)pdf文件无法打开的解决方案 (2)https://www.cnblogs. ...