배경
Wechat 공개 계정 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)
그러나 WeChat 브라우저에서는 위의 코드가 유효하지 않으며 이는 WeChat 브라우저의 제한 사항입니다.
WeChat의 JS-SDK는 이미지를 다운로드하는 데 사용되는 wx.downloadImage() 메서드를 제공합니다. 하지만 사실은 원숭이 놀이에 사용되어야 한다고 생각합니다. 이 메소드는 url 매개변수를 승인하지 않고 serverId를 승인합니다. serverId의 출처는 어디입니까?다른 메서드 wx.uploadImage()에서 가져옵니다. wx.uploadImage() 메서드는 로컬 이미지를 업로드하는 데 사용되지만 업로드가 성공한 후 콜백 함수는 serverId를 가져올 수 있습니다. 어디에 업로드합니까? WeChat의 자체 서버입니다. 자신의 회사 서버에 저장하려면 회사 서버가 멀티미디어 인터페이스를 호출하여 WeChat 서버에서 사진을 가져오도록 해야 합니다. 또한 WeChat 서버는 3일 동안만 저장됩니다. 예, 다운로드할 수 있는 사진은 사용자가 업로드한 사진이며 3일 동안만 유효합니다. 또한 다운로드한 사진은 사진첩에 저장되지 않고 사용자가 찾을 수 없는 곳에 저장될 것으로 보인다. 결론은 전혀 쓸모가 없다는 것입니다.
그러나 WeChat 브라우저에서 길게 누르면 사진을 저장할 수 있습니다.
사실 사진, 동영상, 문서 파일(pdf, word 등)은 js 네이티브 방식으로는 다운로드할 수 없지만, 미리 볼 수 있는 새로운 페이지가 열립니다. 그러나 WeChat에서 미리 볼 수 없는 다른 파일(zip 아카이브인 경우)의 경우 다운로드됩니다. 표시된 사진의 경우 사용자는 사진을 길게 눌러 저장할 수 있습니다.
해결책
- 우선 브라우저가 WeChat 브라우저인지 확인해야 하며, WeChat 브라우저가 아니면 다운로드의 원래 논리가 남아 있습니다.
- 사진인 경우 다운로드 버튼 클릭 시 팝업창이 팝업되어 다운로드할 사진을 길게 누르라는 메시지가 표시됩니다.
- 비디오 또는 문서 파일인 경우 사용자에게 기본 브라우저를 사용하여 파일을 다운로드하라는 메시지를 표시합니다. 사용자가 새 브라우저로 로그인하는 것이 매우 번거롭다는 점을 고려할 때 사용자가 기본 브라우저로 링크를 열기 위해 오른쪽 상단 모서리를 클릭하도록 안내하는 것은 좋은 해결책이 아닙니다. 다운로드 버튼을 클릭할 때 파일 링크를 복사한 다음 사용자가 기본 브라우저를 열고 링크를 붙여넣어 다운로드하도록 할 수 있습니다. 사용자의 클립보드를 점유하는 이러한 동작은 실제로 그리 좋지 않습니다. 또는 다운로드 버튼을 차단하고 잊어 버리거나 PC 측에서만 다운로드할 수 있는 프롬프트를 팝업합니다.
- 다른 형식의 파일이면 제한 없이 바로 다운로드할 수 있습니다.
기사 참조
https://zhuanlan.zhihu.com/p/485755669?utm_id=0