그러나 브라우저에 따라 제한되므로 대부분의 경우 링크만 제공하고 사용자가 클릭하여 열 수 있도록 허용 -> 다른 이름으로 저장을 할 수 있습니다. 다음 링크와 같습니다.
다음과 같이 코드 코드를 복사합니다.
<a href="file.js">file.js</a>
사용자가 이 링크를 클릭하면 브라우저가 열리고 링크가 가리키는 파일의 내용이 표시됩니다. 이는 분명히 우리의 요구 사항을 충족하지 않습니다. HTML5는 a 태그에 다운로드 속성을 추가합니다. 이 속성이 존재하는 한 링크를 클릭하면 브라우저는 링크가 가리키는 파일을 열지 않고 대신 다운로드합니다(현재 Chrome, Firefox 및 오페라).
다운로드 시 링크 이름은 파일 이름으로 직접 사용되지만 다운로드할 파일 이름을 추가하기만 하면 됩니다(예: download="not-a-file.js").
그러나 이것만으로는 충분하지 않습니다. 위의 방법은 파일이 서버에 있는 경우에만 사용하기에 적합합니다. 브라우저 측에서 js에 의해 생성된 컨텐츠를 브라우저가 다운로드하도록 하려면 어떻게 해야 합니까?
사실, 아직 많은 사람들이 DataURI라는 단어를 들어본 적이 있을 것입니다. 다음과 같은 이미지의 src입니다.
다음과 같이 코드 코드를 복사합니다.
<img src="data:image/gif;base64,R0lGOXXXXX">
DataURI에 대한 설명은 여기로 옮길 수 있으므로 여기서는 설명하지 않겠습니다.
이제 js로 생성된 콘텐츠를 다운로드할 때 따라야 할 법칙이 있습니다. 다음과 같은 메소드로 캡슐화됩니다.
다음과 같이 코드 코드를 복사합니다.
함수 downloadFile(aLink, 파일 이름, 콘텐츠){
aLink.download = 파일이름;
aLink.href = "데이터:텍스트/일반," + 내용;
}
downloadFile을 호출한 후 사용자는 링크를 클릭하여 브라우저 다운로드를 트리거합니다.
그러나 위의 방법에는 두 가지 단점이 있으며 이로 인해 많은 게으른 소녀가 손실됩니다.
다운로드할 수 있는 파일 형식에 제한이 있습니다. 처리된 사진을 다운로드하려면 어떻게 해야 합니까?
다운로드하려면 다시 클릭해야 하는데, 너무 번거롭습니다.
파일 형식 문제를 해결하려면 브라우저의 새로운 API(URL.createObjectURL)를 사용하여 문제를 해결할 수 있습니다. URL.createObjectURL은 일반적으로 이미지를 표시하기 위해 이미지의 DataURI를 생성하는 데 사용됩니다. 브라우저에서 파일 형식을 설정하도록 도와주세요.
URL.createObjectURL의 매개변수는 File 객체 또는 Blob 객체입니다. File 객체는 input[type=file]을 통해 선택된 파일입니다. Blob 객체는 바이너리 대형 객체입니다.
이제 파일 형식 제한 문제를 해결하려면 콘텐츠가 포함된 ObjectURL을 만들고 이를 aLink에 할당하기만 하면 됩니다.
파일 자동 다운로드도 매우 쉽습니다. UI 클릭 이벤트를 직접 만든 다음 자동으로 트리거하여 자동 다운로드를 수행할 수 있습니다.
이제 최종 코드를 살펴보겠습니다.
다음과 같이 코드 코드를 복사합니다.
함수 downloadFile(파일 이름, 콘텐츠){
var aLink = document.createElement('a');
var blob = new Blob([콘텐츠]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//마지막 두 매개변수가 없는 initEvent는 FF에서 오류를 보고합니다. 피드백을 주신 Barret Lee에게 감사드립니다.
aLink.download = 파일이름;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
이제 downloadFile이 호출되자마자 파일이 자동으로 다운로드됩니다. ^_^.
참고: 현재(2014-01) Blob 및 URL.createObjectURL은 더 이상 표준 브라우저에서 개인 접두어를 추가할 필요가 없으므로 안심하고 사용할 수 있습니다~~ 걱정되시면 Can I Use를 확인하시면 됩니다.