JavaScrip URL 기반 이미지 다운로드
function downFile(content, filename) {
//
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// blob
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
//
document.body.appendChild(eleLink);
eleLink.click();
//
document.body.removeChild(eleLink);
};
downFile(다운로드 주소, 이름 저장);2. iframe 방식
// if (typeof(download.iframe) == 'undefined') {
// var iframe = document.createElement('iframe');
// download.iframe = iframe;
// document.body.appendChild(download.iframe);
// };
// download.iframe.src = newdownloadUrl;
// download.iframe.style.display = "none";
3. form 방식
// var $eleForm = $("<form method='get'></form>");
// $eleForm.attr("action", "https://codeload.github.com/douban/douban-client/legacy.zip/master");
// $eleForm.attr("action", url);
// $(document.body).append($eleForm);
// $eleForm.submit();
downloadIamge(imgsrc, name) {//
let image = new Image();
// Canvas
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL("image/png"); // base64
let a = document.createElement("a"); // a
let event = new MouseEvent("click"); //
a.download = name || "photo"; //
a.href = url; // URL a.href
a.dispatchEvent(event); // a
};
image.src = imgsrc;
},
원리먼저 다운로드의 사용 방법을 살펴보겠습니다.
Download file
위의 코드를 보세요. 탭에 다운로드 속성을 추가하면 이 링크를 누르면 자동으로 파일을 다운로드할 수 있습니다~참고로 다운로드 파일의 파일 이름을 지정하는 데 사용할 속성 값은 선택할 수 있습니다.위의 예에서 우리가 로컬로 다운로드한 파일 이름은 filename입니다.zip 당기기, 지정하지 않으면somefile입니다.zip이라는 이름을 당겨라!여기 보시면 아부지, 분명히 HTML5의 새로운 기능으로 파일을 다운로드하는 거잖아요. 자바스크립트로 파일을 다운로드하기로 했잖아요?사실 JavaScript로 파일을 다운로드하는 것도 이런 특성을 이용하여 이루어진 것이다. 우리의 JavaScript 코드는 다음과 같다.
응, 이런 작법에 대해 나는 단지 네가 너무 정확하게 했다고 말할 수 있을 뿐이야!서버에 이미 존재하는 정적 파일을 다운로드하려면 이렇게 쓰는 것이 가장 편리하다.브라우저는 전체 다운로드 과정을 처리해 줄 것이니 간섭할 필요가 없다.만약 당신이blob 방식으로 파일을 다운로드한다면 다음과 같은 제한이 있을 것입니다.
제한1: 브라우저마다blob 대상에 대한 제한이 다르다
다음 표를 참조하십시오FileSaver.js:
Browser
Constructs as
Filenames
Max Blob Size
Dependencies
Firefox 20+
Blob
Yes
800 MiB
None
Firefox < 20
data: URI
No
n/a
Blob.js
Chrome
Blob
Yes
500 MiB
None
Chrome for Android
Blob
Yes
500 MiB
None
Edge
Blob
Yes
?
None
IE 10+
Blob
Yes
600 MiB
None
Opera 15+
Blob
Yes
500 MiB
None
Opera < 15
data: URI
No
n/a
Blob.js
Safari 6.1+*
Blob
No
?
None
Safari < 6
data: URI
No
n/a
Blob.js
제한2:blob 대상을 구축한 후에야 파일로 변환합니다
이 제한은 작은 파일 (수십 kb) 에는 아무런 영향이 없을 수도 있지만, 조금 큰 파일에는 큰 영향을 미친다.사용자가 100mb의 파일을 다운로드해야 한다고 생각해 보세요.
만약 그가 다운로드 버튼을 눌렀지만 다운로드 알림을 보지 못했다면, 그는 틀림없이 계속 눌렀을 것이다. 몇 번 눌렀는데도 다운로드 알림을 보지 못했을 때, 그는 우리의 사이트를 불평하고 떠났다.
그러나 사실상 다운로드가 확실히 발생했다. 파일을 다운로드한 후에blob 대상을 구축하고 파일로 전환할 수 있을 뿐이다.그리고 사용자가 몇 번 더 다운로드를 터치하면 자원의 낭비를 초래할 수 있다.
따라서 큰 파일을 다운로드하려면 탭을 직접 만드는 것을 추천합니다~html를 쓰든지, 자바스크립트 동적 창설을 쓰든지, 자신이 좋아하는 방식으로 창설하면 된다.JavaScript로 파일을 다운로드하는 이유그래, 한참 동안 말했어. 사실 우리가 줄곧 말한 것은'자바스크립트로 파일을 다운로드하지 마라. 제한이 많고 쓰기도 어렵고 html로 하면 당기기 쉽다. 간단하고 편리하며 빠르다'는 논조이다.사실 그렇긴 하지만 자바스크립트를 통해 미리 처리해야 할 때가 있습니다.권한 검증때때로 우리는 다운로드에 대해 제한을 해야 한다. 가장 흔히 볼 수 있는 것은 권한 검사이다. 예를 들어 이 사용자가 다운로드 권한이 있는지, 고속 다운로드 권한이 있는지 등이다.이때 우리는 JavaScript를 이용하여 사전 처리를 할 수 있다.예: fetch('http://somehost/check-permission', options).then(res => { if (res.code === 0) { var a = document.createElement('a'); var url = res.data.url; var filename = 'myfile.zip'; a.href = url; a.download = filename; a.click(); } else { alert('You have no permission to download the file!'); } });이 예에서 우리는blob로 URL을 구축하지 않고 백엔드 서버를 통해 사용자의 다운로드 링크를 계산한 다음에 이전에 언급한 동적 생성라벨을 이용하여 다운로드를 실현하는 것은 간단하죠!동적 파일동적 생성 파일을 클라이언트에게 되돌려 주는 것도 흔히 볼 수 있는 요구이다. 예를 들어 우리는 때때로 데이터를 내보내는 기능을 해서 데이터베이스에 있는 일부 데이터를 Excel로 내보낸 다음에 클라이언트에게 되돌려 주어야 한다.이때 우리는 href 속성을 간단하게 지정할 수 없다. 왜냐하면 대응하는 URL이 존재하지 않기 때문이다.우리는 JavaScript를 통해 서버에 요청을 보내서 파일을 생성하고 해당하는 URL을 클라이언트에게 되돌려줄 수 있습니다.이 과정이 위의 권한 검사 한 절과 비슷하다고 생각합니까?당겨, 우리가 URL을 미리 처리했을 뿐이니까~이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScrip URL 기반 이미지 다운로드1.H5 다운로드 속성 downFile(다운로드 주소, 이름 저장); 2. iframe 방식 3. form 방식 원리 먼저 다운로드의 사용 방법을 살펴보겠습니다. 위의 코드를 보세요. 응, 이런 작법에 대해 나는 단...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.