Vue实现生成本地Json文件功能方式
更新时间：2024年07月26日 09:41:49 作者：@一个答布刘
这篇文章主要介绍了Vue实现生成本地Json文件功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue生成本地Json文件功能
操作步骤
首先要引入一个JS文件
注意！！
要在自己定义的组件和index.html中都要引用
</template>
<div id="home-div">
<button @click="download">下载</button>
</div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script>
<script>
export default {
name: "Mapview",
data() {
retrun {
positionList: [123, 123]
}
},
methods: {
download() {
var content = JSON.stringify({
jiedao: this.positionList,
})
var blob = new Blob([content], {
type: "text/plain;charset=utf-8"
});
console.log(blob)
saveAs(blob, "jiedao_8hou.json");
},
}
}
</script>这样点击按钮后，把你想存放的数据放在一个数组里，通过这个方法就可以在网页上下载出一个.json文件，而这个.json文件里面的数据，就是你自己写进去的数据
Vue导出JSON格式配置文件
npm安装file-saver包
npm install file-saver --save
引用加配置
import FileSaver from 'file-saver'
// js中的方法，将获取的数据导出为JSON格式
downDeviceProfiles() {
getData(`/deviceProfile/${this.profilesId}`, {},
(response) => {
const blob = new Blob([JSON.stringify(response, null, 2)], {
type: 'application/json'
})
FileSaver.saveAs(blob, this.comTitle)
})
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3.0 响应式系统源码逐行分析讲解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue-router启用history模式下的开发及非根目录部署方法
这篇文章主要介绍了vue-router启用history模式下的开发及非根目录部署方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在前后端分离的项目中经常使用到Vue+axios通过FormData的方式向后端发送表单数据,下面就来介绍一下如何实现,感兴趣的可以了解一下2023-09-09
今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
在 vue 里我们可以通过全局事件总线来实现任意组件之间通信，它的原理是给 Vue 的原型对象上面添加一个属性。这样的话我所有组件的都可以访问到这个属性，然后可以通过这个属性来访问其他组件给这个属性上面绑定的一些方法，从而去传递数据2022-08-08
在Vue2项目中,使用dart-sass替代node-sass可以解决安装困难和环境兼容问题,VueCLI3+用户可直接使用,而VueCLI2用户需升级VueCLI和项目,具体方法包括修改package.json依赖并使用.scss文件编写样式,此更改有助于提升项目的开发效率和跨平台兼容性2024-09-09
element中el-autocomplete的常见用法示例
这篇文章主要给大家介绍了关于element中el-autocomplete的常见用法的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用element具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了vue自定义开发滑动图片验证组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue-cli项目中遇到的eslint的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
debounce是lodash工具库中的一个非常好用的函数。这篇文章主要介绍了Vue.js页面中有多个input搜索框如何实现防抖操作,需要的朋友可以参考下2019-11-11
最新评论