Vue.js – Escribe un objeto JSON en un archivo local

Hace un tiempo comencé a aprender Vue.js y poco tiempo después, comencé un proyecto más grande, sin tener en cuenta que Javascript tiene opciones limitadas para interactuar con el sistema de archivos local. Configuré el proyecto a través de vue-cli, así que tengo que iniciar el sitio web a través de npm start .

Dicho proyecto consiste en un editor visual para archivos JSON. Cuando quise implementar el botón Guardar, reconocí que es una tarea bastante difícil hacer que escribir / guardar (y tal vez leer en el futuro) un archivo JSON en mi máquina local.

Ya intenté usar la biblioteca fs de node, pensando que funcionaría, porque se inicia con node. También probé varias bibliotecas externas, por ejemplo, el write-json-file npm lib.

Estoy llegando a un punto en el que me he quedado sin ideas y haría todo lo que sea necesario para que funcione.

Hay 3 formas de hacer esto.

  1. Escribir al almacenamiento local

  2. Crea un Blob e invoca un evento para descargarlo

  3. Envuélvalo en una aplicación electrónica y use el módulo de nodo fs para guardar el archivo

Les puedo mostrar una muestra aquí para estos 3 casos.

index.html

     Vue test    
{{name}}
{{last}}
{{index}}
{{grade}}
NameLast NameIndexGrade
{{x.first}} {{x.lastn}} {{x.index}} {{x.grade}}

test.js ( Escribir en almacenamiento 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'))) } }); 

Crea un Blob e invoca un evento para descargarlo

solo cambio para la función 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); } 

Envuélvalo en una aplicación electrónica y use el módulo de nodo fs para guardar el archivo

Cambiar para la función 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 !'); } } 

Luego usa Electron para envolverlo

electron ./index.html