微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片

背景

微信公众号H5开发，在普通浏览器，可以直接通过以下代码下载图片：

let a = document.createElement('a')
a.style.display = 'none'
a.href = ‘https://www.图片地址.com’
a.setAttribute('download', '我的图片.jpg')
document.body.appendChild(a)
a.click() //执行下载
window.URL.revokeObjectURL(a.href)
document.body.removeChild(a)

但是在微信浏览器，上面那段代码是无效的，这是微信浏览器的限制。

微信的JS-SDK提供 wx.downloadImage() 的方法，是用来下载图片的。但其实我觉得应该是用来耍猴的。该方法不接受一个 url 参数，而是接受一个 serverId。serverId 从哪来，从另一个方法wx.uploadImage() 里面获得。wx.uploadImage() 方法用于上传本地的图片，但上传成功后，回调函数就能拿到一个 serverId。上传到哪？微信自己的服务器。如果你想保存到自己公司的服务器，你还得让公司服务器调用多媒体接口，从微信服务器拿回图片。而且，微信服务器只给你保存 3 天时间。是的，你能下载的图片的图片来自用户的上传，且只有三天有效期。另外，下载的图片貌似也不会保存到相册里，而是保存在用户找不到的地方。结论就是完全没法用。

但是，在微信浏览器中，长按图片是可以保存的。

实际上，图片、视频以及文档文件（pdf、word 等）都无法通过js原生方法进行下载，而是打开一个新的页面让你预览。但对于其他微信不能预览的文件（如果 zip 压缩包）来说，则会将其下载下来。对于展示出来的图片，用户可以长按图片保存下来。

解决方案

1. 首先要判断浏览器是否为微信浏览器，如果不是微信浏览器，下载保持原来逻辑。
2. 如果是图片，点击下载按钮时弹出弹窗，提示用户长按图片下载。
3. 如果是视频或文档文件，提示用户使用默认浏览器去下载文件。考虑到用户用新的浏览器又要登陆很麻烦，引导用户点击右上角将链接用默认浏览器打开并不是好方案。我们可以在点击下载按钮时，复制文件链接，然后让用户自行打开默认浏览器粘贴链接下载。这种占用用户剪贴板的行为其实不太好。或者直接将下载按钮屏蔽掉算了，又或是弹出只能在 PC 端下载的提示。
4. 如果是其他类型文件，可以直接下载，无限制。

文章参考

https://zhuanlan.zhihu.com/p/485755669?utm_id=0