背景
微信公众号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 压缩包)来说,则会将其下载下来。对于展示出来的图片,用户可以长按图片保存下来。
解决方案
- 首先要判断浏览器是否为微信浏览器,如果不是微信浏览器,下载保持原来逻辑。
- 如果是图片,点击下载按钮时弹出弹窗,提示用户长按图片下载。
- 如果是视频或文档文件,提示用户使用默认浏览器去下载文件。考虑到用户用新的浏览器又要登陆很麻烦,引导用户点击右上角将链接用默认浏览器打开并不是好方案。我们可以在点击下载按钮时,复制文件链接,然后让用户自行打开默认浏览器粘贴链接下载。这种占用用户剪贴板的行为其实不太好。或者直接将下载按钮屏蔽掉算了,又或是弹出只能在 PC 端下载的提示。
- 如果是其他类型文件,可以直接下载,无限制。
文章参考
https://zhuanlan.zhihu.com/p/485755669?utm_id=0