Vue實現(xiàn)生成本地Json文件功能方式
更新時間：2024年07月26日 09:41:49 作者：@一個答布劉
這篇文章主要介紹了Vue實現(xiàn)生成本地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>這樣點擊按鈕后，把你想存放的數(shù)據(jù)放在一個數(shù)組里，通過這個方法就可以在網(wǎng)頁上下載出一個.json文件，而這個.json文件里面的數(shù)據(jù)，就是你自己寫進去的數(shù)據(jù)
Vue導出JSON格式配置文件
npm安裝file-saver包
npm install file-saver --save
引用加配置
import FileSaver from 'file-saver'
// js中的方法，將獲取的數(shù)據(jù)導出為JSON格式
downDeviceProfiles() {
getData(`/deviceProfile/${this.profilesId}`, {},
(response) => {
const blob = new Blob([JSON.stringify(response, null, 2)], {
type: 'application/json'
})
FileSaver.saveAs(blob, this.comTitle)
})
},總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue toRef toRefs toRaw函數(shù)使用示例
這篇文章主要介紹了Vue toRef toRefs toRaw函數(shù)使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-03-03
這篇文章主要介紹了如何使用RoughViz可視化Vue.js中的草繪圖表，幫助大家更好的理解和使用roughViz，感興趣的朋友可以了解下2021-01-01
組件（Component）是 Vue.js 最強大的功能之一。本文重點給大家介紹vuejs組件相關知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
本篇文章主要介紹了詳解Vue路由鉤子及應用場景（小結(jié)），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過代碼實例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關知識，有這方面興趣的朋友參考下吧。2018-01-01
vue3?v-bind="$attrs"繼承組件全部屬性的解決方案
這篇文章主要介紹了vue3?v-bind=“$attrs“?繼承組件全部屬性的解決方案,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
父組件使用 props 把數(shù)據(jù)傳給子組件，子組件使用 $emit 觸發(fā)父組件的自定義事件，今天通過示例給大家詳細介紹下Vue?關于$emit與props的使用，感興趣的朋友一起看看吧2022-03-03
在vue中,key是dom對象的標識,本文主要介紹了Vue中key的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06