H5 a 태그의 다운로드 속성을 사용하여 서비스에서 파일을 다운로드하는 도메인 간 문제를 해결합니다.

가장 간단한 방법:

 <a href='url' download=filename.ext>파일 다운로드</a>

URL이 동일한 소스 리소스를 가리키는 경우 정상입니다.

URL이 타사 리소스를 가리키는 경우 다운로드가 실패하고 다운로드가 사용되지 않을 때와 동작이 동일합니다. 브라우저에서 열 수 있는 파일은 브라우저에서 직접 열리고 열 수 없는 파일은 열리면 직접 다운로드됩니다. 브라우저에서 열린 파일은 수동으로 다운로드할 수 있습니다.

해결 방법 1: 브라우저에서 열 수 없는 .zip/.rar 파일로 파일을 압축하고 다운로드합니다.

해결 방법 2: 백엔드 전달을 통해 백엔드는 타사 리소스를 요청하고 이를 프런트엔드에 반환합니다. 프런트엔드는 파일 보호기와 같은 도구를 사용하여 파일을 저장합니다.

URL이 가리키는 타사 리소스가 CORS로 구성된 경우 다운로드 속성이 유효하지 않지만 로컬에서 파일을 얻어 다운로드할 수 있으며 파일 이름을 수정할 수 없습니다.

 const downloadRes = async (url, name) => { let response = wait fetch(url) // 콘텐츠를 blob 주소로 변환 let blob = wait response.blob() // 숨겨진 다운로드 가능한 링크 생성 let objectUrl = window. URL .createObjectURL(blob) let a = document.createElement('a') //주소 a.href = objectUrl //파일 이름 수정 a.download = name // 클릭 트리거 document.body.appendChild(a) a.click() //setTimeout 제거(() => document.body.removeChild(a), 1000)}

사진을 다운로드하려면 사진을 base64 형식으로 변환한 다음 다운로드하면 됩니다.

 ``export const downloadImg = async (url, name) => { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); '익명'; img.onload = function() { canvas.height = img.height; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL('image/png'); let a = document.createElement('a'); a.href = dataURL; .body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); 캔버스 = null; }, 1000) }; img.src = URL;};```

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.