[移动开发]关于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 = 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)

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 = url
    if(!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都会在浏览器中打开当前文件。（暂时没有找到解决方案）