uni-app h5使用a标签下载base64图片下载不了

uni-app h5使用a标签下载base64图片下载不了

示例代码：

def saveImg(url):
    oA = document.createElement("a")
    oA.download = 'yqh'  # 设置下载的文件名，默认是'下载'
    oA.href = url
    document.body.appendChild(oA)
    oA.click()
    oA.remove()  # 下载之后把创建的元素删除

操作步骤：

  • 下载图片

预期结果：

  • 可以正常下载

实际结果：

  • 下载不了

bug描述：

开发的h5，使用canvas绘制图片，生成base64图片。下载图片时，使用a标签来下载。 测试的时候，在电脑端谷歌浏览器上面可以下载图片。 但是在微信浏览器或者其它的手机浏览器，下载的时候，就下载不了。

信息类别 信息内容
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 4.24
浏览器平台 微信内置浏览器
浏览器版本 8.0.32
项目创建方式 HBuilderX

更多关于uni-app h5使用a标签下载base64图片下载不了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

推荐你用loadBase64Data试试， let bitmap = new plus.nativeObj.Bitmap(“test”); bitmap.loadBase64Data
https://www.html5plus.org/doc/zh_cn/nativeobj.html

更多关于uni-app h5使用a标签下载base64图片下载不了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大佬，使用这种bitmap格式，在h5里面也能使用？我看他们在h5的话，都是推荐使用a标签下载图片的

plus，这是app才能用的吧

在移动端浏览器特别是微信内置浏览器中，直接使用a标签下载base64图片确实会遇到问题。这是因为移动端浏览器对下载行为的限制比PC端更严格。以下是解决方案：

  1. 改用uni.downloadFile API下载：
uni.downloadFile({
    url: base64DataUrl,
    success: (res) => {
        if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                    uni.showToast({title: '保存成功'});
                }
            });
        }
    }
});
  1. 对于微信浏览器，需要先转成blob对象：
function base64ToBlob(base64) {
    let arr = base64.split(',');
    let 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});
}

let blob = base64ToBlob(base64DataUrl);
let blobUrl = URL.createObjectURL(blob);
// 然后再使用a标签下载
  1. 也可以考虑使用uni-app的plus.io API：
plus.io.resolveLocalFileSystemURL('_downloads/', (dir) => {
    dir.getFile('filename.png', {create:true}, (fileEntry) => {
        fileEntry.createWriter((writer) => {
            writer.write(base64Data);
        });
    });
});
回到顶部