此文章用于记录经验,方便下次借鉴,为节省时间用于举例的UI也许有点简陋,将就将就…重要的是方法。
<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等会弹框让你选择保存地址),如下: