Vue.js - Écrire un objet JSON dans un fichier local

Question

Il y a quelque temps, j'ai commencé à apprendre Vue.js et peu de temps après, j'ai lancé un projet plus important, sans tenir compte du fait que Javascript a des options limitées pour interagir avec le système de fichiers local. J'ai configuré le projet via vue-cli, donc je dois démarrer le site via npm start.

Le projet consiste en un éditeur visuel pour les fichiers JSON. Lorsque j'ai voulu implémenter le bouton de sauvegarde, j'ai remarqué que c'était une tâche assez difficile de le faire écrire/sauvegarder (et peut-être lire à l'avenir) un fichier JSON sur ma machine locale.

J'ai déjà essayé d'utiliser la bibliothèque fs de node, pensant que cela fonctionnerait, car elle est lancée avec node. J'ai également essayé plusieurs bibliothèques externes comme la bibliothèque npm write-json-file.

J'arrive à un point où je suis à court d'idées et je ferais à peu près tout ce qui est nécessaire pour que ça fonctionne.

Answer 1

Il existe 3 façons de le faire.

1. Écrire dans le stockage local

2. Créer un Blob et invoquer un événement pour le télécharger

3. L'encapsuler dans une application electron et utiliser le module node fs pour enregistrer le fichier

Je peux vous montrer un exemple ici pour ces 3 cas

index.html

    Vue test

        {{name}}
        {{last}}
        {{index}}

            5
            6
            7
            8
            9
            10

        {{grade}}
        Ajouter au tableau
        Enregistrer le fichier

        PrénomNomIndiceGrade

            {{x.first}}
            {{x.lastn}}
            {{x.index}}
            {{x.grade}}

test.js (Écrire dans le stockage local)

new Vue ({
  el: '#vue-app',
  data: {
      name: '',
      last: '',
      index: 0,
      grade: 0,
      arr: []
  },

  methods: {
      add: function (e) {
          this.arr.push({first: this.name, lastn: this.last, index: this.index, grade: this.grade});
          console.log(1);
      },
      saveFile: function() {
        const data = JSON.stringify(this.arr)
        window.localStorage.setItem('arr', data);
        console.log(JSON.parse(window.localStorage.getItem('arr')))
  }
});

Créer un Blob et invoquer un événement pour le télécharger

changer seulement pour la fonction saveFile

saveFile: function() {
    const data = JSON.stringify(this.arr)
    const blob = new Blob([data], {type: 'text/plain'})
    const e = document.createEvent('MouseEvents'),
    a = document.createElement('a');
    a.download = "test.json";
    a.href = window.URL.createObjectURL(blob);
    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
    e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
}

L'incorporer dans une application Electron et utiliser le module node fs pour enregistrer le fichier

changer pour la fonction saveFile

saveFile: function() {
    const data = JSON.stringify(this.arr)
    const fs = require('fs');
    try { fs.writeFileSync('myfile.txt', data, 'utf-8'); }
    catch(e) { alert('Impossible d'enregistrer le fichier !'); }
}

Ensuite utilisez Electron pour l'incorporer

electron ./index.html