자바스크립트로 파일 다운로드

좋은 시각적 개체 (jQuery UI 대화 상자, 하지만 필수)로 설정 하는 매우 쉽게, 모든 너무 테스트 는 새 탭에서 그것을 열고 싶은 경우, 이 작업을 수행 하는 유일한 방법은 사용자가 _blank 설정 하는 대상 속성 링크를 클릭 하는 것입니다. saveA는 onTouchDown 또는 onClick과 같은 사용자 상호 작용 이벤트 내에서 실행되어야 합니다. setTimeout은 saveA가 트리거되는 것을 방지합니다. 때문에 iOS saveAs는 다운로드하는 대신 새 창에서 열립니다,이 수정을 원하는 경우이 버그가 당신에게 미치는 영향을 애플에 알려주십시오. HTML 앵커 요소()를 사용하여 브라우저에서 이러한 동작을 달성하는 것이 가능합니다. 앵커 요소는 HTML 문서의 다른 리소스 및 문서에 하이퍼링크를 추가하는 데 유용합니다. 연결된 리소스의 URL은 앵커 요소의 href 특성에 지정됩니다. 누군가가이 솔루션의 단점을 알고 있다면 나는 그들에 대해 듣고 매우 행복 할 것이다. 당신이 구글 크롬을 사용하고 당신이 옵션을 활성화 한 상상 “다운로드 한 파일 자동 열기”, 당신의 불운을 위해 당신은 악의적 인 웹 사이트에 입력하고 알 수없는 파일의 다운로드를 생성합니다. 여러분은 이 이야기가 어떻게 끝나는지 압니다. URL 인터페이스를 사용하면 매우 간결한 형식으로 Blob 개체 또는 파일을 나타내는 데 사용되는 개체 URL이라는 특수 한 종류의 URL을 만들 수 있습니다. 다음은 일반적인 개체 URL의 모양입니다 : 다음 스니펫은 파일을 생성하고 (확장자와) 접촉없이 다운로드 할 수 있습니다 : 가장 좋은 부분은 모든 것이 생성되고 즉석에서 파괴되기 때문에 서버에 잔여 파일을 남기지 않는다는 것입니다! URL.createObjectURL()을 사용하여 JavaScript에서 생성된 데이터를 다운로드하고 나중에 객체 URL(해지ObjectURL 포함)을 취소하려는 경우(권장되는 대로) 다운로드가 완료된 후 이를 수행해야 합니다. 이렇게 하려면 downloads.on변경 된 이벤트를 들어보십시오.

나는 또한 당신의 상황에 도움이 될 수있는 jQuery 파일 다운로드 플러그인 (데모) (GitHub)를 만들었습니다. 그것은 iframe과 꽤 유사하게 작동하지만 내가 아주 편리하게 발견 한 몇 가지 멋진 기능을 가지고 있습니다 : 지금까지 우리는 서버에서 제공되고 HTTP를 통해 클라이언트로 전송되는 파일을 다운로드 할 수있는 방법을 살펴 보았습니다 . 또한 웹 API를 사용하여 브라우저에서 프로그래밍 방식으로 콘텐츠를 추출하거나 생성하는 방법도 보았습니다. 브라우저가 렌더링할 수 있는 파일(예: HTML 또는 텍스트 파일)을 다운로드하도록 하려면 서버가 임의의 이진 데이터에 사용되는 응용 프로그램/x-please-download-me 또는 응용 프로그램/옥텟 스트림과 같은 무의미한 값으로 파일의 MIME Type을 설정해야 합니다. 나는 JQuery없이 @rakaloof 솔루션을 사용합니다 (여기에 필요하지 않기 때문에). 아이디어를 주셔서 감사합니다! 다음은 바닐라JS 양식 기반 솔루션입니다. 일반적으로 이 특성을 서버에서 생성한 파일 경로로 채우지만 이번에는 JavaScript를 사용하여 동적으로 링크를 생성하도록 할당합니다. 이 옵션을 생략하는 경우, 브라우저는 이 동작에 대한 일반적인 사용자 기본 설정에 따라 파일 선택기를 표시하거나하지 않습니다 (Firefox에서이 환경 설정은 약 :환경 설정에서 “항상 파일을 저장할 위치를 요청”, 또는 browser.download.useDownloadDir 에 대한 :config). 아주 좋은 간결. 이것은 텍스트 파일을 생성하고 다운로드하는 데 효과적입니다 : 내 서버에없는 원격 텍스트 파일을 가져 와서 다운로드할 수 있도록 브라우저로 다시 전달하는 마법은 무엇입니까? 나는 php.를 통해 스트리밍을 피하고 싶다. 내 경우에는 그들은 어쩌면 내가 JS를 통해 스트리밍 할 수있을만큼 작다? 정말 큰 파일을 더 크게 저장해야하는 경우 Blob의 크기 제한이 있거나 충분한 RAM이 없는 경우 새 스트림 API의 힘으로 데이터를 비동기적으로 하드 드라이브에 직접 저장할 수있는 고급 StreamSaver.js를 살펴보십시오.