不久前，我开始学习Vue.不久之后，我开始了一个更大的项目，但没有记住，Javascript与本地文件系统交互的选项有限.
该项目包括一个JSON文件的可视化编辑器.当我想要实现save按钮时，我意识到将JSON文件写入/保存(将来可能还会读取)到本地机器是一项相当困难的任务.
我已经try 过使用node的fs库，我认为它会起作用，因为它是用node启动的.
我已经到了一个没有 idea 的地步，我会做任何必要的事情来让它工作.
不久前，我开始学习Vue.不久之后，我开始了一个更大的项目，但没有记住，Javascript与本地文件系统交互的选项有限.
该项目包括一个JSON文件的可视化编辑器.当我想要实现save按钮时，我意识到将JSON文件写入/保存(将来可能还会读取)到本地机器是一项相当困难的任务.
我已经try 过使用node的fs库，我认为它会起作用，因为它是用node启动的.
我已经到了一个没有 idea 的地步，我会做任何必要的事情来让它工作.
有三种方法可以做到这一点.
写入本地存储器
创建一个Blob并调用一个事件来下载它
将其包装到electron应用程序中，并使用node fs模块保存文件
我可以给你看这3箱的样品
指数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/vue@2.5.13/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 (写入本地存储器)
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
仅对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 100 module to save file
更改为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 !'); }
}
然后用Electron把它包起来
electron ./指数html