需求：省市区的json数据，然后因为要在数据中区中添加 全某某市的数据，通过遍历其实可以做到不用改json文本的数据，但是以前没有弄过写入文本的数据，就想试着做一下。
1.在vue中引入FileSaver.js 插件，通过cdn的方式
1.首先在 index.html 文件中引入插件
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
2.在vue.config.js中进行配置，格式为'aaa':'bbb',aaa表示要引入资源的名字，bbb表示要导出给外部引用的名字，由对应的库自己定，例如，vue 为 Vue，vue-router 为 VueRouter
现在启动项目 报错 没找到原因，不知道为什么，希望有人能给解决一下
错误图片
externals:{
'FileSaver':'FileSaver'
},
2.js读json文件：
<div>
<input type="file" id="files" @click="writer">
</div>
<script>
writer(){
// console.log(area)
var writeFiles = document.getElementById('files')
// console.log(writeFiles)
writeFiles.addEventListener('change',function(){
var files1 = writeFiles.files[0]
// console.log(files1) // => 图一
var reader = new FileReader()
reader.readAsText(files1)
reader.onload = function() {
// console.log(this.result) // => 图二
let data = JSON.parse(this.result) // 这边JSON.parse，导入文件应为json文件
// console.log(data) // => 图三
data.forEach(item => {
item.children.forEach(dis => {
// console.log(dis)
dis.children.unshift({
label:`全${dis.label}`,
value:dis.value
})
})
})
// console.log(JSON.stringify(data)) // => 图四
this.data = data
// console.log(this.data)
}
},false)
</script>
图一
图二
图三
图四
3.js写json文件：
<div>
<input type="button" id="export" value="保存">
</div>
<script>
var button = document.getElementById('export')
button.addEventListener('click',function() {
var files1 = writeFiles.files[0]
var reader = new FileReader()
reader.readAsText(files1)
reader.onload = function() {
// console.log(this.result) // => 图一
var data1 = JSON.parse(this.result)
// console.log(data) // => 图二
data1.forEach(item => {
item.children.forEach(dis => {
// console.log(dis)
dis.children.unshift({
label:`全${dis.label}`,
value:dis.value
})
})
})
console.log(data1)
console.log(JSON.stringify(data1))
let data1JSON = JSON.stringify(data1)
var blob = new Blob([data1JSON],{type:"text/plain;charset=utf-8"})
saveAs(blob,"save json")
}
},false)
</script>
4.全部代码
<template>
<div>
<el-button @click="writer">写入</el-button>
<input type="file" id="files" @click="writer">
<input type="button" id="export" value="保存">
</div>
</template>
<script>
// import e from 'https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js'
import area from '@/assets/area.js'
export default {
name:'doc',
data(){
return{
area:area,
data:[]
}
},
methods:{
writer(){
// console.log(area)
var writeFiles = document.getElementById('files')
// console.log(writeFiles)
writeFiles.addEventListener('change',function(){
var files1 = writeFiles.files[0]
// console.log(files1) // => 图一
var reader = new FileReader()
reader.readAsText(files1)
reader.onload = function() {
// console.log(this.result) // => 图二
let data = JSON.parse(this.result)
// console.log(data) // => 图三
data.forEach(item => {
item.children.forEach(dis => {
// console.log(dis)
dis.children.unshift({
label:`全${dis.label}`,
value:dis.value
})
})
})
console.log(JSON.stringify(data)) // => 图四
this.data = data
// console.log(this.data)
}
},false)
var button = document.getElementById('export')
button.addEventListener('click',function() {
var files1 = writeFiles.files[0]
var reader = new FileReader()
reader.readAsText(files1)
reader.onload = function() {
// console.log(this.result) // => 图一
var data1 = JSON.parse(this.result)
// console.log(data) // => 图二
data1.forEach(item => {
item.children.forEach(dis => {
// console.log(dis)
dis.children.unshift({
label:`全${dis.label}`,
value:dis.value
})
})
})
console.log(data1)
console.log(JSON.stringify(data1))
let data1JSON = JSON.stringify(data1)
var blob = new Blob([data1JSON],{type:"text/plain;charset=utf-8"})
saveAs(blob,"save json")
}
},false)
}
}
}
</script>
<style>
</style>
