프런트 엔드 기술이 발전함에 따라 점점 더 많은 비즈니스 시나리오에서 파일 다운로드를 처리하기 위해 프런트 엔드가 필요합니다. 많은 방법 중에서 <a> 태그의 다운로드 속성을 통해 다운로드하는 것이 일반적이고 비교적 간단한 방법입니다.
기존 <a> 태그는 href를 통한 링크 점프를 구현합니다. 미리보기로 점프하지 않고 파일만 다운로드하려는 경우 가장 좋은 방법은 <a> 태그에 download 속성을 추가하는 것이며, 다운로드 작업을 쉽게 구현할 수 있습니다. .
download HTML5의 <a> 태그의 새로운 속성입니다. 이 속성은 다운로드 작업을 강제로 실행하여 브라우저에 URL을 탐색하는 대신 다운로드하도록 지시하고 사용자에게 이를 로컬 파일로 저장하라는 메시지를 표시합니다. 예를 들어:
<a href=result.png 다운로드>다운로드</a>
download 속성이 누락된 경우 다운로드를 클릭하면 미리보기 이미지로 바로 변경되며, download 속성이 추가되면 이미지 다운로드가 실행됩니다.
download 속성의 현재 호환성은 caniuse에 표시된 것과 같습니다.
대부분의 주류 브라우저는 기본적으로 download 속성을 지원하며 IE의 성능은 그 어느 때보다 인상적입니다. 현재 많은 Windows 시스템이 여전히 IE를 사용하고 있으며 이는 많은 비즈니스에서 고려해야 할 사항이기도 합니다. 이 호환성 문제는 download 의 광범위한 적용을 제한합니다.
동적 콘텐츠 다운로드의 일부 비즈니스 시나리오, 즉 그림과 같은 리소스의 주소가 고정되지 않은 경우(예: 일부 온라인 그리기 도구에서 생성된 그림) HTML만으로는 요구 사항을 충족할 수 없습니다. 다양한 URL 다운로드를 충족시키기 위해 JS를 통해 URL 다운로드를 동적으로 트리거하는 방법을 구현할 수 있습니다.
function download(href, filename='') { const a = document.createElement('a') a.download = 파일 이름 a.href = href document.body.appendChild(a) a.click() a.remove() } 코드에서 생성된 <a> 에 대해 수행되는 appendChild 및 remove 작업은 주로 FireFox 브라우저와의 호환성을 위한 것입니다. FireFox 브라우저에서 이 메서드를 호출할 때 생성된 <a> 태그를 에 추가하지 않으면 됩니다. 링크를 클릭하면 아무 작업도 수행되지 않고 다운로드가 실행되지만 Chrome에서는 그렇지 않습니다.
위의 방법을 사용하면 동일한 출처의 리소스를 다운로드할 수 있습니다. 그러나 많은 시나리오에서는 도메인 간 리소스도 처리해야 합니다. 안타깝게도 download 속성은 현재 동일 출처 URL 에만 적용됩니다. 즉, 다운로드할 리소스 주소가 크로스 도메인인 경우 download 속성이 유효하지 않으며 링크를 클릭하면 탐색 미리보기로 전환됩니다.
테스트: 다운로드하려면 클릭하세요. 결과는 미리보기일 뿐이며 이미지를 다운로드할 수 없습니다.
참고: Chrome 65는 이전에 파일의 도메인 간 다운로드를 트리거하는 download 속성을 지원했지만 이후에는 동일 원본 정책을 엄격히 준수했으며 더 이상 download 속성을 통해 도메인 간 리소스 다운로드를 트리거할 수 없었습니다. FireFox는 도메인 간 리소스의 download 속성을 지원하지 않습니다.
download 속성은 다운로드를 트리거할 수 있을 뿐만 아니라 다운로드 파일 이름도 지정할 수 있습니다.
<a href=test.png download=joker.png>다운로드</a>
다운로드한 파일의 접미사가 소스 파일과 일치하는 경우 기본 파일 이름을 설정할 수 있습니다.
<a href=test.png download=joker>다운로드</a>
작성자는 <a> 태그를 통해 도메인 간 리소스 다운로드를 트리거하는 문제에 직면한 적이 있습니다. 코드는 download 설정되는 위치가 약간 다르다는 점을 제외하면 기본적으로 위에서 언급한 다운로드 방법과 동일합니다.
a.setAttribute(다운로드, true)
그 결과, 이전 버전의 Chrome 브라우저에서는 다음과 같은 상황이 발생했습니다.
다운로드 파일 이름이 true 가 됩니다. 당연히 브라우저는 download 속성 값을 파일 이름으로 읽습니다.
분석 결과 위의 문제는 주로 다음과 같은 이유로 인해 발생했습니다.
1. 우선 download true 로 설정하면 disabled 됩니다. download 의 속성 값은 파일 이름과 직접적인 관련이 있습니다. 그리고 이 프런트엔드 및 백엔드 응답형 다운로드 방법의 경우 download 속성이 필요하지 않습니다.
2. Chrome 초기 버전에서는 크로스 도메인 리소스의 download 속성을 지원할 뿐만 아니라, download 통해 크로스 도메인 리소스의 파일명을 재설정하여 위와 같은 상황이 발생했습니다.
프런트엔드와 백엔드가 협력하여 파일 다운로드를 완료하는 비즈니스 시나리오는 일반적으로 백엔드가 응답 헤더에 Content-Disposition 정보를 설정하여 구현됩니다.
HTTP 시나리오에서 Content-Disposition의 첫 번째 매개 변수는 인라인(기본값, 응답의 메시지 본문이 페이지의 일부 또는 전체 페이지로 표시됨을 나타냄) 또는 첨부 파일(메시지 본문이 표시됨을 의미)입니다. 대부분의 브라우저는 파일 이름 값을 다운로드한 파일 이름으로 미리 채우는 다른 이름으로 저장 대화 상자를 표시합니다.
응답 헤더에 Content-Disposition 설정되어 있고 프런트 엔드도 해당 링크의 <a> 태그에 download 속성을 추가하는 경우 이때 명명 규칙은 다음과 같습니다.
HTTP 헤더의 Content-Disposition 속성에 이 속성과 다른 파일 이름이 할당된 경우 HTTP 헤더 속성이 이 속성보다 우선합니다.
테스트 후 HTTP 헤더의 Content-Disposition 비어 있지 않은 것으로 나타났습니다.
Chrome 브라우저에서는 HTTP 헤더에 있는 Content-Disposition 의 첫 번째 매개변수가 attachment 또는 inline 으로 설정되어 있더라도 filename이 설정되어 있는 한 download 파일 이름을 재설정할 수 없습니다. 반대로 파일명이 비어 있으면 download 속성 값이 파일명으로 설정됩니다. FireFox 브라우저에서 브라우저는 Content-Disposition 의 파일 이름 값만 읽습니다. 파일 이름이 비어 있으면 소스 파일 이름이 사용됩니다. 현재 download 파일 이름을 재설정할 수 없습니다.
요약: 응답 헤더에 Content-Disposition 정보가 설정되지 않은 경우(예: 일반적으로 리소스를 직접 찾는 동일 출처 URL) download 속성이 파일 이름을 재설정할 수 있습니다. 백엔드가 Content-Disposition 필드에 파일 이름을 설정한 경우 파일 이름 값이 우선합니다.
백엔드에 파일 이름이 설정되어 있는데도 파일 이름을 재설정하려면 어떻게 해야 합니까?
블롭: URL download 속성에 대한 소개도 있습니다.
HTTP URL은 동일한 출처에 있어야 하지만 blob: URL 및 data: URL을 사용하면 사용자가 JavaScript를 사용하여 생성된 콘텐츠(예: 온라인 그리기 웹 애플리케이션을 사용하여 생성된 사진)를 더 쉽게 다운로드할 수 있습니다.
Blob (Binary Large Object)은 이진 대형 개체입니다. 일부 데이터베이스에서는 Blob을 사용하여 이진 파일을 저장하는 필드 유형을 나타냅니다. 파일 인터페이스도 Blob을 기반으로 하며 Blob의 기능을 상속하고 사용자 시스템에서 파일을 지원하도록 확장합니다. Blob 객체는 Blob 생성자를 사용하여 생성됩니다.
Blob(blobParts[, 옵션])
var debug = {hello: world};var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); 일부 간단한 텍스트 또는 JS 문자열 파일을 다운로드해야 하는 경우 텍스트 정보를 Blob 바이너리 스트림으로 변환하고 Blob URL을 생성한 다음 download 속성을 사용하여 다운로드를 완료할 수 있습니다.
const downloadText = (text, filename = '') { const a = document.createElement('a') a.download = 파일 이름 const blob = new Blob([text], {type: 'text/plain'}) // text는 다운로드해야 하는 텍스트 또는 문자열 콘텐츠를 나타냅니다. a.href = window.URL.createObjectURL(blob) // blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf와 유사한 URL 문자열이 생성됩니다. document.body.appendChild(a) a.click() a.remove()}이 Blob URL과 일반 HTTP URL의 차이점은 무엇입니까?
Blob URL/개체 URL은 Blob 및 파일 개체를 이미지 및 바이너리 데이터 다운로드 링크와 같은 URL 소스로 사용할 수 있도록 하는 의사 프로토콜입니다.
브라우저는 URL.createObjectURL() 통해 내부적으로 Blob 또는 File 개체에 대한 특수 참조를 생성합니다. 생성된 Blob URL은 브라우저의 단일 인스턴스와 동일한 세션에서만 사용할 수 있으며 이 URL 개체는 다음과 같은 경우에 사용됩니다. 페이지가 종료됩니다.
따라서 Blob URL은 서버 리소스를 가리킬 수 없으며 다른 페이지에서 열 수 없습니다. 동시에 인코딩 형식의 차이로 인해 Blob URL은 데이터 URL보다 공간 리소스를 덜 차지하고 성능이 더 좋습니다.
Blob은 웹 개발에 매우 유용한 기능인 Blob URL 생성을 제공합니다. 바이너리 데이터를 Blob 개체로 캡슐화한 다음 URL.createObjectURL() 사용하여 Blob URL을 생성합니다. Blob URL 자체는 동일한 출처의 URL이므로 다운로드 및 이름 지정 문제를 해결하기 위해 download 에 이 URL을 사용할 수 있습니다. 도메인 간 리소스.
Blob 및 Fetch는 도메인 간 및 파일 이름 지정 문제를 해결할 수 있습니다. fetch 사용하여 도메인 간 리소스를 얻고, Blob 개체를 반환하고, Blob URL을 생성하고, <a> 태그의 download 속성을 사용하여 다운로드를 트리거합니다. 코드는 다음과 같습니다:
function download(href, filename = '') { const a = document.createElement('a') a.download = 파일 이름 a.href = href document.body.appendChild(a) a.click() a.remove() }function downloadFile(url, filename='') { fetch(url, { headers: new Headers({ Origin: location.origin, }), mode: 'cors', }) .then(res => res.blob()) .then(blob => { const blobUrl = window.URL.createObjectURL(blob) 다운로드(blobUrl, 파일 이름) window.URL.revokeObjectURL(blobUrl) })}이때 다시 다운로드를 클릭하면 크로스 도메인 이미지를 로컬 영역에 정상적으로 다운로드할 수 있습니다.
크로스 도메인 리소스가 있는 서버는 Access-Control-Allow-Origin 정보로 구성되어야 합니다. 그렇지 않으면 대문자 크로스 도메인 오류가 발생합니다. 헤더 구성 예:
//헤더에 액세스할 도메인 이름을 허용합니다('Access-Control-Allow-Origin: *') //헤더에 액세스할 도메인 이름을 지정합니다('Access-Control-Allow-Origin: https://h5.ele.me ');이 방법에는 여전히 몇 가지 단점이 있습니다. 예를 들어 브라우저는 Blob 데이터의 크기를 500M 이하로 제한하며 성능 측면에서도 부족합니다.
요약 현재 프런트엔드에는 다양한 다운로드 방법이 있으며 download 속성 다운로드는 가장 간단한 방법 중 하나입니다. 그러나 이러한 기능 중 일부를 주의 깊게 고려하면 유용한 정보를 많이 얻을 수도 있습니다. download 브라우저 기능과 밀접한 관련이 있으며 현재 이 속성의 호환성도 큰 문제입니다. 그러나 Microsoft 관계자조차도 사용자에게 더 이상 IE download 사용하지 말라고 간청하고 있습니다. 미래에는 응용 가능성이 점점 더 넓어질 것입니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.