기사에서는 파일 스트림을 사용하여 js에서 csv 파일을 다운로드하는 방법을 자세히 설명합니다.

이 글은 js+csv에 대한 관련 지식을 제공합니다. 주로 Blob 객체가 무엇인지, 어떻게 이해하는지, 파일 스트림을 사용하여 csv 파일을 다운로드하는 방법을 소개합니다. 모두를 돕습니다.

파일 스트림을 사용하여 csv 파일을 다운로드하기 위해 js를 구현하는 방법

Blob 개체 이해하기

Blob 개체가 등장하기 전에는 Blob 이후로 JavaScript에서 바이너리 파일을 처리하는 더 좋은 방법이 없었습니다. 도입되었으므로 이를 사용하여 이진 데이터를 조작할 수 있습니다.

이제 Bolb 개체와 해당 파일 스트림 다운로드 응용 프로그램 시나리오를 이해하기 시작했습니다. 더 이상 고민하지 말고 자세한 소개를 살펴보겠습니다.

• Blob 개체를 만드는 방법은 다음과 같습니다.

var blob = new Blob(dataArray, options);

dataArray: Blob 객체에 추가할 데이터가 포함된 배열입니다. 배열은 이진 객체이거나 문자열일 수 있습니다.

options는 배열에 있는 데이터의 MIME 유형을 설정하는 데 사용되는 선택적 개체 매개변수입니다.

• DOMString 객체의 Blob 객체를 생성합니다. 다음 코드:

 var str = "<div>Hello World</div>";
 var blob = new Blob([str], {type: &#39;text/xml&#39;});
 console.log(blob); // 输出：Blob {size: 22, type: "text/xml"}

• URL.createObjectURL 개체 이해

window 개체 URL 개체는 Blob 또는 파일을 URL로 읽는 데 사용됩니다.

 window.URL.createObjectURL(file / blob);

예를 들어, 이제 위의 blob 개체를 결합하여 URL의 간단한 데모를 생성하고 있습니다. 실제 열은 다음과 같습니다.

    var str = "<div>Hello World</div>";
    var blob = new Blob([str], {type: &#39;.csv, application/vnd.openxmlformats-        officedocument.spreadsheetml.sheet, application/vnd.ms-excel&#39;});
    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"}

두 번째 url3 변수 값 정보는 다음과 같이 인쇄됩니다.

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

• HTML5에서 a 태그의 다운로드 속성을 이해하세요.

HTMl5는 속성 값을 설정하는 한 다운로드 속성을 a 태그에 추가했습니다. 링크를 클릭하면 브라우저가 새 링크를 열지 않고 파일이 직접 다운로드되며 파일 이름은 다운로드 속성 값입니다.

이 기능과 결합하면 파일 스트리밍을 구현하여 파일을 다운로드할 수 있습니다. 먼저 원본 코드를 기반으로 링크를 동적으로 생성한 다음 a 태그의 스타일을 none으로 설정하고 링크의 href를 설정합니다. 속성은 위에서 window.URL.createObjectURL(blob)을 사용하여 생성한 URL이고, 속성 값은 다운로드 파일의 파일 이름입니다. 마지막으로 클릭 기능을 실행하여 다운로드합니다. 다음 코드:

        var str = "<div>Hello World</div>";
        var blob = new Blob([str], {type: &#39;.csv, application/vnd.openxmlformats-        officedocument.spreadsheetml.sheet, application/vnd.ms-excel&#39;});
        console.log(blob);
        const url3 = window.URL.createObjectURL(blob);
        console.log(url3);
        var filename = &#39;文件流下载&#39; + &#39;.csv&#39;;
        const link = document.createElement(&#39;a&#39;);
        link.style.display = &#39;none&#39;;
        link.href = url3;
        link.setAttribute(&#39;download&#39;, filename);
        document.body.appendChild(link);
        link.click();

추천 학습: "JavaScript Video Tutorial"

위 내용은 기사에서는 파일 스트림을 사용하여 js에서 csv 파일을 다운로드하는 방법을 자세히 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!