js 파일 흐름 으로 csv 파일 다운로드 실현

1. Blob 대상 이해
Blob 대상 이 나타 나 기 전에 자바 script 에서 바 이 너 리 파일 을 처리 하 는 좋 은 방법 이 없 었 습 니 다. Blob 가 생 긴 후부 터 바 이 너 리 데 이 터 를 조작 할 수 있 습 니 다.이제 우 리 는 Bolb 대상 과 그의 파일 흐름 다운로드 응용 장면 을 이해 하기 시작 했다.
1. Blob 대상 을 만 드 는 방법 은 다음 과 같 습 니 다.

var blob = new Blob(dataArray, options);

dataArray: Blob 대상 에 추가 할 데 이 터 를 포함 하 는 배열 입 니 다.배열 은 바 이 너 리 대상 이나 문자열 일 수 있 습 니 다.
options 는 선택 할 수 있 는 대상 매개 변수 로 배열 의 데 이 터 를 설정 하 는 MIME 형식 입 니 다.
1. DOMString 대상 의 Blob 대상 을 만 듭 니 다.다음 코드:

var str = "
Hello World
"; 
var blob = new Blob([str], {type: 'text/xml'}); 
console.log(blob); //   ：Blob {size: 22, type: "text/xml"}

2. URL 을 이해 합 니 다. createObjectURL 대상
window 대상 의 URL 대상 은 blob 나 file 을 url 로 읽 는 데 사 용 됩 니 다.
window.URL.createObjectURL(file / blob);
예 를 들 어 저 는 지금 위의 blob 대상 과 결합 하여 url 의 간단 한 demo 실 열 을 만 듭 니 다. 다음 과 같 습 니 다.

var str = "
Hello World
"; 
var blob = new Blob([str], {type: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'});
console.log(blob); 

const url3 = window.URL.createObjectURL(blob);
console.log(url3);

위 코드 의 첫 번 째 인쇄 blob 변 수 는 다음 과 같 습 니 다.

Blob {size: 22, type: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"}

두 번 째 url 3 변수 값 정 보 를 다음 과 같이 인쇄 합 니 다.

blob:null/2c75a56e-0104-4572-bc19-391d3bf93d9d

3. HTML 5 에서 a 탭 의 download 속성 이해
HTMl 5 에서 a 탭 에 download 속성 을 추 가 했 습 니 다. 이 속성 값 을 설정 하면 브 라 우 저 는 새 링크 를 열지 않 고 파일 을 직접 다운로드 합 니 다. 파일 이름 은 download 의 속성 값 입 니 다.
따라서 이 특징 을 결합 하면 우 리 는 파일 흐름 다운로드 파일 을 간단하게 실현 할 수 있 습 니 다. 우 리 는 먼저 원래 의 코드 를 바탕 으로 a 링크 를 동적 으로 만 든 다음 에 이 a 태그 의 스타일 을 none 으로 설정 할 수 있 습 니 다. 이 링크 의 href 속성 은 바로 우리 위 에 window. URL. createObject URL (blob) 이 있 습 니 다.생 성 된 url, 그리고 우 리 는 a 링크 의 download 속성 을 설정 합 니 다. 이 속성 값 은 우리 의 다운로드 파일 이름 입 니 다.마지막 으로 클릭 기능 을 터치 하면 다운로드 할 수 있 습 니 다.다음 코드:

var str = "
Hello World
"; 
var blob = new Blob([str], {type: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'});
console.log(blob);
const url3 = window.URL.createObjectURL(blob);
console.log(url3);

var filename = '     ' + '.csv';
const link = document.createElement('a');
link.style.display = 'none';
link.href = url3;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();