JS를 사용하여 browser_javascript 기술로 다운로드 파일 생성

그러나 브라우저에 따라 제한되는 경우가 많으므로 링크만 제공하고 사용자가 클릭하여 열 수 있도록 허용 -> 다른 이름으로 저장. 다음 링크와 같습니다.

코드 복사 코드는 다음과 같습니다.

file.js

사용자가 이 링크를 클릭하면 브라우저가 열리고 링크가 가리키는 파일의 내용이 표시됩니다. 이는 분명히 우리의 요구 사항을 충족하지 않습니다. HTML5는 a 태그에 다운로드 속성을 추가합니다. 이 속성이 존재하는 한, 링크를 클릭하면 브라우저는 링크가 가리키는 파일을 열지 않고 대신 다운로드합니다. (현재는 Chrome, Firefox 및 오페라).

다운로드 시 링크 이름이 파일 이름으로 직접 사용되지만, download="not-a-file.js"와 같이 다운로드할 파일 이름을 추가하기만 하면 됩니다.

하지만 위 방법은 파일이 서버에 있을 때만 사용하기에 적합하지 않습니다. 브라우저 측에서 js에 의해 생성된 컨텐츠를 브라우저가 다운로드하도록 하려면 어떻게 해야 합니까?

사실 아직 많은 사람들이 DataURI라는 단어를 들어본 적이 있을 것입니다.

코드 복사 코드는 다음과 같습니다.

DataURI 설명은 여기로 옮겨도 되지만 여기서는 설명하지 않겠습니다.
이제 js로 생성된 콘텐츠를 다운로드할 수 있는 법적 근거가 생겼습니다. 다음과 같은 메소드로 캡슐화됩니다.

코드 복사 코드는 다음과 같습니다.

function downloadFile (aLink, 파일 이름, 콘텐츠){
aLink.download = fileName;

aLink.href = "data:text/plain," content;
}

downloadFile을 호출한 후 사용자는 링크를 클릭하여 브라우저 다운로드를 실행합니다.

그러나 위의 방법에는 두 가지 단점이 있으며 이로 인해 많은 게으른 소녀를 잃게 됩니다.

다운로드할 수 있는 파일 형식이 제한되어 있습니다. 처리된 사진을 다운로드하려면 어떻게 해야 하나요?

다운로드하려면 다시 클릭해야 하는데 너무 번거롭습니다.
파일 형식 문제를 해결하려면 브라우저의 새로운 API(URL.createObjectURL)를 사용하면 됩니다. URL.createObjectURL은 일반적으로 이미지를 표시하는 데 사용됩니다. 파일을 다운로드하십시오. 브라우저는 파일 형식을 설정하는 데 도움이 됩니다.

URL.createObjectURL의 매개변수는 File 객체 또는 Blob 객체입니다. File 객체는 input[type=file]을 통해 선택된 파일입니다. Blob 객체는 바이너리 대형 객체입니다.

이제 콘텐츠가 포함된 ObjectURL을 생성하고 이를 aLink에 할당하면 파일 형식 제한 문제를 해결할 수 있습니다.

파일 자동 다운로드도 매우 쉽습니다. UI 클릭 이벤트를 직접 만든 다음 자동으로 실행하여 자동 다운로드를 수행할 수 있습니다.

이제 최종 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

함수 downloadFile(파일 이름, 콘텐츠){
var aLink = document.createElement('a');

var blob = new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent ("click", false, false);//마지막 두 매개변수가 없는 initEvent는 FF에서 오류를 보고합니다. 피드백을 주신 Barret Lee에게 감사드립니다
aLink.download = fileName;
aLink.href = URL. createObjectURL( blob);
aLink.dispatchEvent(evt);
}

이제 downloadFile이 호출되자마자 자동으로 파일이 다운로드됩니다 ^_^.

참고: 현재(2014-01) Blob 및 URL.createObjectURL은 더 이상 표준 브라우저에서 개인 접두어를 추가할 필요가 없으므로 안심하고 사용할 수 있습니다~~ 걱정되시면 Can I Use를 확인하시면 됩니다.