js 흐름 및 다운로드

트리거 다운로드
보통 페이지 에서 링크 를 클릭 하여 다운로드 합 니 다. 그림 을 다운로드 하려 면 어떻게 합 니까?

<a download="fileName.jpg" href="http://xxx/xxx.jpg">      </a>

속성 분석:

download: 반드시 이 a 라벨 을 대표 하 는 동작 은 다운로드 이 고 value 는 다운로드 할 파일 이름

href: 반드시 다운로드 한 자원 경 로 를 대표 합 니 다. 다운로드 단 추 를 누 르 면 요청 한 자원 은 메모리 에서 이 링크 를 통 해 표시 되 고 그 다음 에 이 링크 가 어떻게 생 성 되 는 지 설명 합 니 다.

큰 파일 다운로드
파일 을 다운로드 하면 스 트림 을 통 해 속도 가 빠르다.ArrayBuffer
흐름 표시

//    2    buffer
const buffer = new ArrayBuffer(2);

buffer 가 있 는데 어떻게 안쪽 으로 데 이 터 를 채 웁 니까?ArrayBuffer 또는 TypedArrayTyped Array

DataView

Int8Array、Uint8Array

Int16Array、Uint16Array

Int32Array、Uint32Array

Float32Array、Float64Array

위의 Uint8C 는 Uint Unit 가 아 닙 니 다. Int8Array 를 예 로 들 면 다음 에 2 개의 바이트 가 포 함 된 ArrayBuffer 를 새로 만 들 고, 이어서 Int8Array (1 값 1 필드) 를 보기 로 보 여 줍 니 다. 그래서 Int8Array 에 값 을 기록 할 때마다 ArrayBuffer 1 개의 바이트 가 차지 합 니 다.

const buffer = new ArrayBuffer(2);
const x1 = new Int8Array(buffer);

x1[0] = 3;
x1[1] = 4;

console.log(x1 instanceof Object);
console.log(Object.keys(x1));

//   
true
[ '0', '1' ]

이 를 통 해 알 수 있 듯 이 TypedArray 는 개 Object 이 고, Int8Array 는 8 비트 기호 정 수 를 표시 하기 때문에 범 위 는 0~{ }1 111 111, 즉 0~127 이 므 로 입력 값 num & 127 에 따라 저 장 됩 니 다.createObjectURL
지난 절 에 스 트림 이 라 고 했 는데 스 트림 으로 어떻게 다운 받 아 요?a 태그 의 href 도 이 흐름 을 직접 가리 킬 수 없 기 때문에 메모리 에 있 는 데이터 로 흐 르 는 링크 가 있어 야 합 니 다. createObjectURLURL. createObjectURL () 정적 방법 은 매개 변수 에 표 시 된 대상 의 URL 을 포함 하 는 DOMString 을 만 듭 니 다.이 URL 의 수명 주기 와 창 을 만 드 는 document 바 인 딩 입 니 다.이 새 URL 대상 은 지정 한 File 대상 이나 Blob 대상 을 표시 합 니 다.

<a download="fileName.jpg" href="http://xxx/xxx.jpg">      </a>
href = URL.createObjectURL(blob)

마지막 '이 새로운 URL 대상 은 지정 한 File 대상 이나 Blob 대상 을 표시 합 니 다' 에서 볼 수 있 습 니 다. createObjectURL File 또는 Blob 대상 을 받 으 면 어떻게 흐름 을 이 두 개 로 바 꿉 니까?Blob
Blob 대상 은 가 변 적 이지 않 고 원본 데이터 의 클래스 파일 대상 을 표시 합 니 다.Blob 는 반드시 JavaScript 네 이 티 브 형식의 데 이 터 를 나타 내 는 것 은 아 닙 니 다.File 인 터 페 이 스 는 Blob 를 기반 으로 blob 의 기능 을 계승 하여 사용자 시스템 의 파일 을 지원 하도록 확장 합 니 다.

new Blob([arrayBuffer], { type })

그 중에서 res 흐름 을 나타 내 고 type 파일 의 mine 유형 을 나타 낸다.revokeObjectURL
다운로드 가 완료 되면 방금 다운로드 한 데 이 터 를 내용 에 저장 할 필요 가 없습니다. 아래 방법 으로 풀 수 있 습 니 다.
URL. revokeObjectURL () 정적 방법 은 이전에 존 재 했 던 URL. createObjectURL () 을 호출 하여 만 든 URL 대상 을 방출 하 는 데 사 용 됩 니 다.URL 대상 을 끝 낸 후에 이 방법 을 사용 하여 브 라 우 저 에 게 메모리 에 이 파일 에 대한 인용 을 계속 유지 하지 않 아 도 된다 는 것 을 알 게 해 야 합 니 다.

URL.revokeObjectURL(href)

주의 href 매개 변 수 는 URL.createObjectURL(blob) 생 성 된 값 입 니 다.