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)
}
【以下回答由 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
强制触发下载。