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

新阿伟先生

已于 2022-09-29 16:18:34 修改

阅读量9k

点赞数 1

分类专栏：知识点文章标签： javascript 开发语言 ecmascript

于 2022-03-12 13:54:47 首次发布

本文链接：https://blog.csdn.net/weixin_45022563/article/details/123442690

版权

<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 = url
    a.download = fileName
    a.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"; // 返回类型blob
    xhr.send(); // 发送ajax请求
    xhr.onreadystatechange = function () {
   
        // 监听属性xhr.readyState每次变化时会触发