此文章用於記錄經驗,方便下次借鑑,爲節省時間用於舉例的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等會彈框讓你選擇保存地址),如下: