web-dev-qa-db-fra.com

Vue.js - Ecrire un objet JSON dans un fichier local

Il y a quelque temps, j'ai commencé à apprendre Vue.js et peu de temps après, j'ai commencé un plus grand projet, sans garder à l'esprit que Javascript a des options limitées pour interagir avec le système de fichiers local. J'ai mis en place le projet via vue-cli, je dois donc démarrer le site via npm start.

Ce projet consiste en un éditeur visuel pour les fichiers JSON. Lorsque j'ai voulu implémenter le bouton Enregistrer, j'ai reconnu que c'est une tâche assez difficile à faire: écrire/enregistrer (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, par exemple le write-json-file npm lib.

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

javascriptjsonnode.jsvue.jsvuejs2
7
Phero

Il y a 3 façons de procéder.

  1. Écrire dans le stockage local

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

  3. Enveloppez-le dans une application électronique et utilisez le module node fs pour enregistrer le fichier

Je peux vous montrer un échantillon ici pour ces 3 cas

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue test</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
    <form>
        <input type="text" v-model="name"/>{{name}}<br/>
        <input type="text" v-model="last"/>{{last}}<br/>
        <input type="text" v-model="index"/>{{index}}<br/>
        <select v-model="grade">
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
        {{grade}}
        <button type="button" v-on:click="add()">Add To Table</button>
        <button type="button" v-on:click="saveFile()">saveFile</button>
    </form>
    <table border="1">
        <thead><td>Name</td><td>Last Name</td><td>Index</td><td>Grade</td></thead>
        <tbody>
        <tr v-for="x in arr">
            <td>{{x.first}}</td>
            <td>{{x.lastn}}</td>
            <td>{{x.index}}</td>
            <td>{{x.grade}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="test.js"></script>
</body>
</html>

test.js ( Ecrire sur 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éez un Blob et invoquez un événement pour le télécharger

ne changer que 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);
}

Enveloppez-le dans une application Electron et utilisez 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('Failed to save the file !'); }
}

Utilisez ensuite Electron pour l'envelopper

electron ./index.html

23
yue you