Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考

此文章用于记录经验，方便下次借鉴，为节省时间用于举例的UI也许有点简陋，将就将就…重要的是方法。

1、导出json文件

1.1、安装file-saver

使用cnpm install file-saver --save安装file-saver

1.2、使用file-saver
进入需要导出json文件的组件，使用file-saver

<template><div class="hello"><button @click="exportJSON">导出jsonn</button></div>
</template><script>
import FileSaver from 'file-saver'
export default {data () {return {// 待导出的json数据CfgInfo: {CAN: {Chn: 0,name: 'CAN通道'},LIN: {Chn: 1,name: 'LIN通道'}}}},methods: {exportJSON () {// 将json转换成字符串const data = JSON.stringify(this.CfgInfo)const blob = new Blob([data], {type: ''})FileSaver.saveAs(blob, 'hahaha.json')}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

点击按钮后，json文件将被导成你设置的文件（谷歌浏览器会默认下载到默认地址，不会弹框，ie、360等会弹框让你选择保存地址），如下：

2、导入JSON文件

在导出逻辑上添加了导入逻辑后的代码：

<template><div class="hello"><button @click="exportJSON">导出jsonn</button><div><input id="file" type="file" accept=".json"/><button @click="importJSON">导入json</button></div></div>
</template><script>
import FileSaver from 'file-saver'
export default {data () {return {// 待导出的json数据CfgInfo: {CAN: {Chn: 0,name: 'CAN通道'},LIN: {Chn: 1,name: 'LIN通道'}},// 将导入的json保存在这个对象下ImportJSON: {}}},methods: {// 导出jsonexportJSON () {// 将json转换成字符串const data = JSON.stringify(this.CfgInfo)const blob = new Blob([data], {type: ''})FileSaver.saveAs(blob, 'hahaha.json')},// 导入jsonimportJSON () {const file = document.getElementById('file').files[0]const reader = new FileReader()reader.readAsText(file)const _this = thisreader.onload = function () {// this.result为读取到的json字符串，需转成json对象_this.ImportJSON = JSON.parse(this.result)// 检测是否导入成功console.log(_this.ImportJSON)}}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

选择之前导出的文件后，点击导入，可见控制台输入了导入的json值，如下：

真实项目中除了UI需要大概外，还需要注意添加异常处理等，请根据自己的项目需求更改，以上demo仅作基础功能参考。

Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考相关推荐

vue 增加js日志输出文件_Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考...
本文只用于记录经验,为节省时间用于举例的UI也许有点简陋. 1.导出json文件安装file-saver 使用 npm install file-saver --save 安装 file-saver ...
纯前端js直接导入导出json文件
现在很多公司都有多个测试环境或者其他环境,有些配置信息在其他环境需要同样的信息,按照传统只能修改数据库对于新手小白来说只能求助于服务端了,现在前端也可以直接将当前的数据导出为json文件,然后在需要的 ...
js读取excel导出json文件
1.依赖包xlsx npm install node-xlsx 2.代码 const XLSX = require('xlsx') const fs = require('fs')const dest ...
图形化开发（六）01-Three.js之导入模型——3dmax和SketchUp-editor编辑器导出json文件，在创建模型initMesh中外部的JSON文件
图形化开发(六)01-Three.js之导入模型--3dmax和SketchUp-editor编辑器导出json文件,在创建模型initMesh中外部的JSON文件导入模型官方推荐我们使用的3D模 ...
vue获取本地php数据,Vue-cli项目获取本地json文件数据的实例
下面我就为大家分享一篇Vue-cli项目获取本地json文件数据的实例,具有很好的参考价值,希望对大家有所帮助. 在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件 ...
echarts 导入地区.json文件生成地图
echarts 导入地区.json文件生成地图提前说明: 对于前端写大屏展示,在地图这一块有很多是直接引用的 gis 文件,但是也有一部分是使用的 echarts数据可视化的地图. 本文只是 ...
vue.js中mock本地json数据
vue.js中mock本地json数据新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
在ASP.NET Core 3.1 MVC中集成Vue.js V4和使用Dropzone文件上传
目录介绍先决条件 Node.js的介绍您已经安装了Node.js/NPM吗? Node/ NPM版本相关的常见错误 Vue.js简介安装Vue.js V4 NET Core介绍安装Visua ...
idea中Gitlab项目导入导出
idea中Gitlab项目导入导出 2018年04月16日 16:39:23 蓝之刃阅读数:15415 Gitlab的使用 Gitlab跟Github类似,都是代码托管的网站,最大的不同是Gitla ...

Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考

1、导出json文件

1.1、安装file-saver

2、导入JSON文件

Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考相关推荐

最新文章

热门文章