Menu
Some while ago I started learning Vue.js and a short while after, I started a bigger project, not keeping in mind, that Javascript has limited options to interact with the local file system. I set up the project via vue-cli, so I have to start the website via npm start.
Said project consist of a visual editor for JSON Files. When I wanted to implement the save button, I recognized that it's a quite difficult task to make is write/save (and maybe read in the future) a JSON file to my local machine.
I already tried using node's fs library, thinking it would work, because it is launched with node. I also tried several external libraries e.g. the write-json-file npm lib.
I'm getting to a point where I'm out of ideas and would do pretty much anything thats necessary to make it work.
919
In your text editor, open the src/main. js file. Once you've chained the use method, save this file. The use method tells the Vue application which code to bundle together when the application is built.
Reading the JSON file We can read a (local) JSON file by importing it into the vue component and rendering the data into the dom by looping through it. In the above code, we first imported the users. json file as usersData then assigned it to the users data property.
There are 3 ways to do this.
Write to local storage
Create a Blob and invoke an event to download it
Wrap it into a electron app and use node fs module to save file
I can show you a sample here for these 3 cases
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 (Write to local storage)
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'))) } }); Create a Blob and invoke a event to download it
only change for saveFile func
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); } Wrap it into an Electron app and use node fs module to save file
Change for saveFile func
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 !'); } } Then use Electron to wrap it
electron ./index.html
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
