vue 增加js日志输出文件_Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考...

本文只用于记录经验，为节省时间用于举例的UI也许有点简陋。

1、导出json文件

安装file-saver

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

使用file-saver

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

<template><div class="hello"><button @click="exportJSON">导出json</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, 'ceshi.json');}}
};
</script>

点击按钮后，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 = this;reader.onload = function() {// this.result为读取到的json字符串，需转成json对象_this.ImportJSON = JSON.parse(this.result);// 检测是否导入成功console.log(_this.ImportJSON);};}}
};
</script>

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

vue 增加js日志输出文件_Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考...相关推荐

Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考
此文章用于记录经验,方便下次借鉴,为节省时间用于举例的UI也许有点简陋,将就将就-重要的是方法. 1.导出json文件 1.1.安装file-saver 使用cnpm install file-sav ...
纯前端js直接导入导出json文件
现在很多公司都有多个测试环境或者其他环境,有些配置信息在其他环境需要同样的信息,按照传统只能修改数据库对于新手小白来说只能求助于服务端了,现在前端也可以直接将当前的数据导出为json文件,然后在需要的 ...
.bas是什么文件以及如何打开导入导出.bas文件的方法
内容提要:文章介绍.bas是什么文件,以及用什么软件打开和导入导出.bas文件的方法.对Excel感兴趣的朋友可加Excel学习交流群:284029260(www.itblw.com) .bas是什么 ...
图形化开发（六）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数据可视化的地图. 本文只是 ...
文件上传下载导入导出
ps: 代码已提交到gitee: https://gitee.com/Lazy_001/file-demo 文件上传下载导入导出一.首先完成准备工作 1. 创建一个Springboot项目 < ...
php mysql 命令行模式_MySQL_MYSQL导入导出sql文件简析，一.MYSQL的命令行模式的设置- phpStudy...
MYSQL导入导出sql文件简析一.MYSQL的命令行模式的设置桌面->我的电脑->属性->环境变量->新建-> PATH=":path\mysql\bin ...
达梦数据库导入导出dmp文件的常见方式
目录导入 1.在DM管理工具中以模式方式导入 (1)新建用户 (2)刷新模式,找到对应的模式右键导入 2.dimp命令导入 (1)dimp 详细命令参数 (2)导入命令实例导出 1.在DM管理工具 ...

vue 增加js日志输出文件_Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考...

1、导出json文件

2、导入JSON文件

vue 增加js日志输出文件_Vue.JS项目导入导出JSON文件的方案之一，其他项目也可参考...相关推荐

最新文章

热门文章