手机浏览器下载图片问题

Question

uniapp开发，用手机调试h5，现在有一张base64的图片，在电脑模拟手机是可以用 以下方法触发下载，但是手机浏览器就下载不了，创建了任务，就是下载不成功，一直不动，还有一个未知源或者大小的提示。有什么办法可以成功下载吗？（百度手机浏览器，uc浏览器不行，我手机oppo自带的浏览器就可以）

const dataURLtoBlob = (dataurl)=>{
    let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
const downloadFile = (url,name)=>{
    let a = document.createElement("a") //新建一个a链接
    a.setAttribute("href",url) // a链接的url为图片的url
    a.setAttribute("download",name)
    a.setAttribute("target","_blank")
    let clickEvent = document.createEvent("MouseEvents");
    clickEvent.initEvent("click", true, true);  
    a.dispatchEvent(clickEvent);
}
const downloadFileByBase64 = (base64,name)=>{
    let myBlob = dataURLtoBlob(base64);
    let myUrl = URL.createObjectURL(myBlob); //创建图片的临时url
    downloadFile(myUrl,name)
}

Answer 1

【以下回答由 GPT 生成】

问题的解决方案是使用不同的方法来下载base64图片，因为不同的浏览器对下载方式有不同的支持。以下是解决方案的代码示例和步骤：

const downloadFile = (url, name) => {
    let a = document.createElement('a'); //新建一个a链接
    a.href = url; // a链接的url为图片的url
    a.download = name;
    a.target = '_blank';

    // 检查浏览器类型，如果是UC浏览器，则使用window.location.href下载
    let isUCBrowser = navigator.userAgent.indexOf('UCBrowser') > -1;
    if (isUCBrowser) {
        window.location.href = url;
    } else {
        let clickEvent = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: false
        });
        a.dispatchEvent(clickEvent);
    }
}

const downloadFileByBase64 = (base64, name) => {
    let myBlob = dataURLtoBlob(base64);
    let myUrl = URL.createObjectURL(myBlob); //创建图片的临时url
    downloadFile(myUrl, name);
}

步骤说明： 1. 创建一个新的a标签 2. 设置a标签的href属性为图片的url 3. 设置a标签的download属性为文件名，这样会触发下载 4. 检查浏览器类型，如果是UC浏览器，直接使用window.location.href进行下载 5. 否则，使用模拟点击的方式进行下载

这样修改之后，应该可以在多个手机浏览器上成功下载base64图片。需要注意的是，UC浏览器可能无法通过JavaScript进行下载，所以需要使用window.location.href强制触发下载。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^