Un article explique en détail comment utiliser le flux de fichiers pour télécharger des fichiers csv en js

Cet article vous apporte des connaissances pertinentes sur js+csv. Il présente principalement ce qu'est un objet Blob, comment le comprendre et comment utiliser les flux de fichiers pour télécharger des fichiers csv. Pour ceux qui sont intéressés, jetons-y un coup d'œil. aide tout le monde.

Comment implémenter js pour télécharger des fichiers csv à l'aide du flux de fichiers

Comprendre l'objet Blob

Avant l'apparition de l'objet Blob, il n'y avait pas de meilleur moyen de traiter les fichiers binaires en JavaScript Depuis le Blob. a été introduit, nous pouvons l'utiliser pour exploiter des données binaires.

Maintenant, nous commençons à comprendre l'objet Bolb et son scénario d'application de téléchargement de flux de fichiers. Sans plus tarder, jetons un coup d'œil à l'introduction détaillée

• La manière de créer un objet Blob est la suivante :

var blob = new Blob(dataArray, options);

. dataArray : C'est un tableau qui contient les données à ajouter à l'objet Blob. Les tableaux peuvent être des objets binaires ou des chaînes.

options sont des paramètres d'objet facultatifs utilisés pour définir le type MIME des données dans le tableau.

• Créez un objet Blob de l'objet DOMString. Le code suivant :

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

• Comprendre l'objet URL.createObjectURL

objetwindow L'objet URL est utilisé pour lire le blob ou le fichier dans une URL.

 window.URL.createObjectURL(file / blob);

Par exemple, je combine maintenant l'objet blob ci-dessus pour générer une simple démo d'une URL. La colonne réelle est la suivante :

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

La première valeur de la variable blob d'impression dans le code ci-dessus est la suivante :

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

. Les informations sur la valeur de la deuxième variable url3 sont imprimées comme suit ：

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

• Comprendre l'attribut de téléchargement de la balise a en HTML5

HTMl5 a ajouté un attribut de téléchargement à la balise a Tant que nous définissons la valeur de l'attribut, le navigateur n'ouvrira pas de nouveau lien en cliquant sur le lien. Au lieu de cela, le fichier sera téléchargé directement et le nom du fichier est la valeur d'attribut du téléchargement.

Ainsi, combiné à cette fonctionnalité, nous pouvons simplement implémenter le streaming de fichiers pour télécharger des fichiers. Nous créons d'abord dynamiquement un lien a basé sur le code d'origine, puis définissons le style de la balise a sur none et le href du lien. L'attribut est l'URL que nous avons générée avec window.URL.createObjectURL (blob); puis nous définissons l'attribut de téléchargement du lien a. La valeur de l'attribut est le nom de notre fichier de téléchargement. Enfin, déclenchez la fonction clic pour télécharger. Le code suivant :

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

Apprentissage recommandé : "Tutoriel vidéo JavaScript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!