Comment enregistrer des fichiers en utilisant JavaScript

JavaScript est un langage de programmation largement utilisé dans le développement Web pour interagir avec les utilisateurs via le navigateur. Dans de nombreuses applications Web, les utilisateurs doivent enregistrer certaines données sur leur ordinateur local afin de pouvoir les réutiliser lors de sessions ultérieures. JavaScript fait cela en utilisant un mécanisme appelé sauvegarde de fichiers. Dans cet article, nous apprendrons comment enregistrer un fichier sur votre ordinateur local à l'aide de JavaScript.

Présentation

Enregistrer un fichier fait référence au stockage de données sur le disque dur de votre ordinateur local. Ceci peut être réalisé en utilisant le mécanisme de sauvegarde de fichiers en JavaScript. Lorsque l'utilisateur clique sur le bouton Enregistrer, un nouveau fichier est créé sur l'ordinateur local contenant les entrées de l'utilisateur ou les données de l'application. Il est couramment utilisé dans les applications Web telles que les lecteurs vidéo, les éditeurs de documents, les éditeurs d'images, etc. pour permettre aux utilisateurs de télécharger et d'enregistrer des fichiers modifiés.

Enregistrez des fichiers à l'aide de la bibliothèque FileSaver.js

FileSaver.js est une bibliothèque JavaScript tierce populaire qui peut être utilisée pour enregistrer des fichiers. Il utilise un objet Blob en JavaScript pour créer un fichier contenant des données et l'enregistre sur l'ordinateur local de l'utilisateur en modifiant la propriété href de l'objet window.location.

Pour utiliser la bibliothèque FileSaver.js, vous devez suivre les deux étapes suivantes :

Étape 1 - Importer la bibliothèque

Le code suivant montre comment utiliser un fichier JavaScript pour importer la bibliothèque FileSaver.js :

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>

Étape 2 - Utilisez saveAs dans la fonction library() pour enregistrer un fichier

Le code suivant montre comment utiliser la fonction saveAs() pour enregistrer un fichier :

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});
  saveAs(file, filename);
}

Dans cet exemple, nous créons un fichier nommé "hello.txt " et changez la chaîne « Hello, World » qui y est écrite. Nous utilisons ensuite la fonction saveAs() pour lui transmettre l'objet Blob et le nom du fichier. Pendant le processus d'enregistrement du fichier, l'utilisateur verra une boîte de dialogue d'enregistrement de fichier l'invitant à spécifier l'emplacement et le nom du fichier à enregistrer.

Enregistrez des fichiers à l'aide des objets FileReader et Blob

Les objets FileReader et Blob sont des API JavaScript natives. Les objets Blob représentent des données binaires et peuvent être utilisés pour créer des fichiers contenant les données. FileReader peut lire le fichier et renvoyer une variable chaîne, qui peut ensuite être écrite sur l'ordinateur local de l'utilisateur.

Étape 1 - Créez un objet Blob et enregistrez-le

Le code suivant montre comment créer un objet Blob et l'enregistrer dans un fichier local :

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});
  var a = document.createElement('a');
  a.href = window.URL.createObjectURL(file);
  a.download = filename;
  a.click();
}

Ici, nous avons créé un fichier appelé "hello.txt" et écrivez la chaîne "Hello, World!" Nous créons une URL contenant un objet Blob en utilisant la méthode window.URL.createObjectURL(). Nous avons ensuite créé un lien et téléchargé le fichier.

Étape 2 - Écrire les données dans un fichier

Le code suivant montre comment écrire des données d'entrée dans FileReader :

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});

  var reader = new FileReader();
  reader.onload = function(event) {
    var text = event.target.result;
    var a = document.createElement('a');
    a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
    a.download = filename;
    a.click();
  };
  reader.readAsText(file);
}

Ici, nous créons un fichier nommé "hello.txt" et ajoutons la chaîne "Hello, World!" il. Nous utilisons la méthode readAsText() de l'instance FileReader pour lire le texte d'un fichier et renvoyer ce texte en cas de succès. Avec ce texte, nous créons un nouveau lien et téléchargeons le fichier.

Conclusion

Dans cet article, nous avons expliqué comment enregistrer des fichiers sur un ordinateur local via JavaScript. Le mécanisme d'enregistrement de fichiers JavaScript peut être utilisé dans de nombreuses applications Web telles que des lecteurs vidéo, des éditeurs de documents, des éditeurs d'images, etc. Nous avons démontré deux implémentations différentes à l'aide de la bibliothèque FileSaver.js et de l'API JavaScript native. Ces implémentations sont faciles à utiliser et offrent une meilleure expérience utilisateur pour les applications Web.

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!