javascript 자동 다운로드

자바 스크립트를 사용하여 파일을 생성하고 다운로드 ? 당신이 그것에 대해 생각 하는 경우, 이것은 당신이 생각 하 고 사용자 상호 작용 없이 허용 되지 않아야(그러나 지금 허용). 이 기사에서는 순수 Javascript를 사용하여 파일을 직접 생성하고 다운로드하는 몇 가지 트릭을 보여 드리겠습니다. 이전에 사용했던 Fetch API 예제를 기반으로 FileReaderobject를 사용하여 다음과 같이 Blob을 읽을 수 있습니다. 이제 다운로드 도우미 기능이 준비되었으므로 이전 예제를 다시 방문하여 수정하여 생성된 콘텐츠에 대한 다운로드를 트리거할 수 있습니다. 자 간다. 그러나 최신 브라우저에서 알 지 않거나 드물게 다운로드 된 파일 확장명이 차단되고 해당 파일을 실제로 열려면 프롬프트가 나타납니다 (Chrome에서 적게). 이 다이어그램에서 녹색 선은 HTTP를 통해 클라이언트에서 서버로의 요청 흐름을 보여 주며 있습니다. 주황색 선은 서버에서 클라이언트로 의 응답 흐름을 표시합니다. . 참고 : 그것은 가장 최근의 브라우저를 지원하지만, 당신은 전체 지원을 제공하기 위해 알아야 할 트릭의 몇 가지가 있습니다. 콘텐츠 처리 헤더는 원래 메일 사용자 에이전트를 위한 것이었으며, 이메일은 여러 첨부 파일이 포함될 수 있는 다중 문서이기 때문에 사용되었습니다.

그러나 웹 브라우저를 포함한 여러 HTTP 클라이언트에서 해석할 수 있습니다. 이 헤더는 처리 유형 및 처리 매개 변수에 대한 정보를 제공합니다. 이 메서드는 동일한 Blob 개체로 호출되더라도 호출될 때마다 항상 새 개체 URL을 반환합니다. 접근 방법 1: 다운로드 특성 사용 다운로드 특성 다운로드 특성은 단순히 앵커 태그를 사용하여 다운로드해야 하는 파일의 위치를 준비합니다. 파일 의 이름은 속성 값 이름을 사용하여 설정할 수 있습니다. 따라서, 파일의 자동 다운로드는 최근 몇 년 동안 달성하기 어려웠다, 하지만 지금은 HTML5의 도입으로,이 작업은 달성하기 쉬워지고있다. 다음은 앞서 언급한 Blob 개체 원본에 대한 몇 가지 코드 샘플입니다. . 참고: 이 옵션을 사용하면 저장As() FileSaver 인터페이스를 지원하지 않는 브라우저에서 구현할 수 있습니다. 파일을 Blob 값으로 설정합니다. 과거에는 인기 있는 브라우저로 인해 안전 문제로 인해 자동 다운로드를 실행하기가 어려웠습니다. HTML5 및 자바 스크립트 다운로드 방법으로, 이것은 더 이상 문제가되지 않습니다.

링크를 클릭할 때 다운로드 파일(파일로 탐색하는 대신): URL을 프로그래밍 방식으로 제공받을 수 있는 모든 곳에서 개체 URL을 사용할 수 있습니다. 예를 들어 URL 인터페이스를 사용하면 개체 URL이라는 특별한 종류의 URL을 만들 수 있으며, 이 URL은 매우 간결한 형식으로 Blob 개체 또는 파일을 나타내는 데 사용됩니다. 일반적인 개체 URL의 모양은 다음과 같습니다: 이 섹션에서는 문서의 시작 부분에서 배운 모든 내용과 Blob 및 개체 URL에 대해 이미 알고 있는 내용을 활용하여 브라우저에서 프로그래밍 방식으로 콘텐츠를 생성하는 방법을 살펴보겠습니다. 처리 매개변수는 파일 이름, 생성 날짜, 수정 날짜, 읽기 날짜, 크기 등과 같은 본문 부품 또는 파일에 대한 정보를 지정하는 추가 매개 변수입니다. 개체 URL을 만들 때마다 개체 URL이 작성된 문서의 수명 동안 유지됩니다. 일반적으로 브라우저는 문서가 언로드될 때 모든 개체 URL을 해제합니다. 그러나 성능을 향상시키고 메모리 사용량을 최소화하기 위해 개체 URL이 더 이상 필요하지 않을 때마다 개체 URL을 해제하는 것이 중요합니다. 다음으로, 키배열을 취하고 객체의 배열 컬렉션을 가져와 각 개체에서 지정된 키만 추출하는 CSV 문자열로 변환하는 함수를 반환하는 collectionToCSV 상위 순서 함수를 정의합니다. 프로그래밍 방식으로 사용할 수 있는 웹 API가 있습니다: 여기 Codepen에서 이 응용 프로그램의 작업 및 고급 예제가 있습니다: Blobs는 때때로 저장되는 대신 열릴 수 있습니다. s가 열렸습니다.