ファイルストリームを使用してjsでcsvファイルをダウンロードする方法について詳しく説明した記事

この記事では、js csv に関する関連知識を紹介します。主に、Blob オブジェクトとは何か、その理解方法、ファイル ストリームを使用して csv ファイルをダウンロードする方法を紹介します。興味のある方は、見てみましょう。皆さんのお役に立てれば幸いです。

ファイル ストリームを使用して CSV ファイルをダウンロードするための js を実装する方法

BLOB オブジェクトについて

Blob オブジェクトが登場する前は、JavaScript でバイナリ ファイルを処理するこれ以上の方法はありませんでしたが、Blob の登場以来、Blob オブジェクトを使用してバイナリ データを操作できるようになりました。

ここで、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 オブジェクトを理解する

ウィンドウ オブジェクトの 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"}

次のように 2 番目の url3 変数値の情報を出力します:

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

• HTML5 の a タグの download 属性について理解する

Give a in HTMl5 タグに新しい download 属性が追加されました。属性値を設定する限り、ブラウザはリンクをクリックしても新しいリンクを開かず、直接ファイルをダウンロードし、ファイル名はダウンロード属性値。

したがって、この機能と組み合わせると、ファイルをダウンロードするためのファイル ストリーミングを簡単に実装できます。最初に元のコードに基づいてリンクを動的に作成し、次に a タグのスタイルを none に設定します。href 属性リンクの URL は、上記の window.URL.createObjectURL (blob); によって生成された URL であり、リンクの download 属性を設定します a. 属性値は、ダウンロード ファイルのファイル名です。最後に、クリック機能をトリガーしてダウンロードします。次のコード:

        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 ビデオ チュートリアル 」

以上がファイルストリームを使用してjsでcsvファイルをダウンロードする方法について詳しく説明した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。