Artikel menerangkan secara terperinci cara menggunakan aliran fail untuk memuat turun fail csv dalam js

Artikel ini membawakan anda pengetahuan yang berkaitan tentang js+csv terutamanya memperkenalkan objek Blob, cara memahaminya dan cara menggunakan strim fail untuk memuat turun fail csv, mari kita lihat sila lihat, semoga ia membantu semua.

Kaedah pelaksanaan JS untuk memuat turun fail csv menggunakan aliran fail

Memahami objek Blob

Sebelum kemunculan objek Blob, tiada cara yang lebih baik untuk mengendalikan fail binari dalam JavaScript Sejak kemunculan Blobs, kami boleh menggunakannya untuk memanipulasi data binari.

Sekarang kita mula memahami objek Bolb dan senario aplikasi muat turun aliran failnya Tanpa berlengah lagi, mari kita lihat pengenalan terperinci

• Creation The Blob objek adalah seperti berikut:

var blob = new Blob(dataArray, options);

dataArray: Ia adalah tatasusunan yang mengandungi data yang akan ditambahkan pada objek Blob. Tatasusunan boleh menjadi objek binari atau rentetan.

pilihan ialah parameter objek pilihan yang digunakan untuk menetapkan jenis MIME data dalam tatasusunan.

• Mencipta objek Gumpalan objek DOMString. Kod berikut:

 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"}

• Memahami objek URL.createObjectURL

Objek URL objek tetingkap digunakan untuk menukar gumpalan atau fail dibaca ke dalam url.

 window.URL.createObjectURL(file / blob);

Sebagai contoh, saya kini menggabungkan objek gumpalan di atas untuk menjana contoh demo ringkas URL seperti berikut:

    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);

Nilai pembolehubah gumpalan dicetak pertama dalam kod di atas adalah seperti berikut:

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

Cetak maklumat nilai pembolehubah url3 kedua seperti berikut:

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

• Fahami atribut muat turun teg dalam HTML5

HTMl5 menambah atribut muat turun pada teg a Selagi kami menetapkan nilai atribut, penyemak imbas tidak akan membuka pautan baharu apabila mengklik pautan, tetapi akan memuat turun fail secara terus dan. nama fail ialah nilai muat turun.

Oleh itu, digabungkan dengan ciri ini, kami hanya boleh melaksanakan penstriman fail untuk memuat turun fail Kami mula-mula membuat pautan secara dinamik berdasarkan kod asal, dan kemudian menetapkan gaya teg a kepada tiada atribut pautan ialah URL yang dijana oleh window.URL.createObjectURL (gumpalan di atas), dan kemudian kami menetapkan atribut muat turun pautan Nilai atribut ialah nama fail fail muat turun kami. Akhir sekali, cetuskan fungsi klik untuk memuat turun. Kod berikut:

        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();

Pembelajaran yang disyorkan: "Tutorial Video JavaScript"

Atas ialah kandungan terperinci Artikel menerangkan secara terperinci cara menggunakan aliran fail untuk memuat turun fail csv dalam js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!