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

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

Jan 23, 2023 am 08:30 AM
javascript csv

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.

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

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);
Copier après la connexion

. 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: 'text/xml'});
 console.log(blob); // 输出:Blob {size: 22, type: "text/xml"}
Copier après la connexion
  • 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);
Copier après la connexion

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: '.csv, application/vnd.openxmlformats-        officedocument.spreadsheetml.sheet, application/vnd.ms-excel'});
    console.log(blob);
    const url3 = window.URL.createObjectURL(blob);
    console.log(url3);
Copier après la connexion

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"}
Copier après la connexion

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

blob:null/2c75a56e-0104-4572-bc19-391d3bf93d9d
Copier après la connexion
  • 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: '.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();
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Lignes de formatage PHP en CSV et écriture du pointeur de fichier Lignes de formatage PHP en CSV et écriture du pointeur de fichier Mar 22, 2024 am 09:00 AM

Lignes de formatage PHP en CSV et écriture du pointeur de fichier

Explication détaillée de la lecture et de l'écriture de fichiers CSV en Java à l'aide d'OpenCSV Explication détaillée de la lecture et de l'écriture de fichiers CSV en Java à l'aide d'OpenCSV Dec 20, 2023 am 09:36 AM

Explication détaillée de la lecture et de l'écriture de fichiers CSV en Java à l'aide d'OpenCSV

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 am 09:39 AM

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript

Comment convertir un fichier CSV en VCF Comment convertir un fichier CSV en VCF Dec 15, 2023 am 10:44 AM

Comment convertir un fichier CSV en VCF

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel

See all articles