如何使用Javascript在移动端将DataURL下载为PNG格式文件

安全阿岳

2026-9-26

问题根因

移动端下载无后缀问题本质是部分移动端浏览器对a标签的download属性、以及DataURL格式的下载支持存在兼容性缺陷导致的。

修复方案

显式指定toDataURL的输出格式为image/png，避免部分浏览器默认导出格式不符合预期
将DataURL转换为Blob对象，再通过URL.createObjectURL生成临时资源地址，相比直接使用DataURL兼容性大幅提升
移除target="_blank"属性，该属性会导致移动端多数浏览器优先触发新标签页打开逻辑，跳过下载配置的文件名规则
增加下载完成后的临时资源回收逻辑，避免内存泄漏

修复后完整代码

// 导出canvas为明确的png格式DataURL
let dataURL = props.map.getCanvas().toDataURL('image/png');
// DataURL转Blob工具方法
function dataURLtoBlob(dataurl) {
    let arr = dataurl.split(','), 
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), 
        n = bstr.length, 
        u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type: mime});
}
let blob = dataURLtoBlob(dataURL);
let url = URL.createObjectURL(blob);
let download = document.createElement('a');
download.download = 'map.png';
download.href = url;
// 触发下载
download.click();
// 回收临时URL释放内存
setTimeout(() => {
    URL.revokeObjectURL(url);
}, 100);