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