Vue實(shí)現(xiàn)生成本地Json文件功能方式
更新時間：2024年07月26日 09:41:49 作者：@一個答布劉
這篇文章主要介紹了Vue實(shí)現(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>這樣點(diǎn)擊按鈕后，把你想存放的數(shù)據(jù)放在一個數(shù)組里，通過這個方法就可以在網(wǎng)頁上下載出一個.json文件，而這個.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é)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
js/vue如何實(shí)現(xiàn)函數(shù)(方法)當(dāng)做參數(shù)傳遞
這篇文章主要介紹了js/vue實(shí)現(xiàn)函數(shù)(方法)當(dāng)做參數(shù)傳遞方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2026-03-03
使用Vue構(gòu)建動態(tài)表單生成器的實(shí)現(xiàn)步驟
在前端開發(fā)中,表單是非常常見的交互元素,然而,當(dāng)表單的結(jié)構(gòu)和字段需要根據(jù)不同的業(yè)務(wù)場景動態(tài)變化時,手動編寫每個表單的代碼會變得非常繁瑣,所以我們可以使用Vue實(shí)現(xiàn)一個動態(tài)表單生成器,本文將詳細(xì)介紹實(shí)現(xiàn)動態(tài)表單生成器的原理,需要的朋友可以參考下2025-04-04
Vue使用exceljs導(dǎo)出excel文件的詳細(xì)教程
這篇文章主要為大家詳細(xì)介紹了Vue如何使用exceljs導(dǎo)出excel文件的詳細(xì)教程,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
vue項(xiàng)目中js-cookie的使用存儲token操作
這篇文章主要介紹了vue項(xiàng)目中js-cookie的使用存儲token操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue+elementUI多表單同時提交及表單校驗(yàn)最新解決方案
假設(shè)有一個頁面,需要分三步填寫三個表單,且每個表單位于獨(dú)立的組件中,然后最后保存同時提交,如何進(jìn)行表單必填項(xiàng)校驗(yàn),下面小編給大家介紹vue+elementUI多表單同時提交及表單校驗(yàn)最新解決方案,感興趣的朋友一起看看吧2024-03-03
elementui中el-row的el-col排列混亂問題及解決
這篇文章主要介紹了elementui中el-row的el-col排列混亂問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue 組件開發(fā)原理與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue 組件開發(fā)原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件開發(fā)的原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue中比較流行且好用的一些組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
elementUI+Springboot實(shí)現(xiàn)導(dǎo)出excel功能的全過程
這篇文章主要介紹了elementUI+Springboot實(shí)現(xiàn)導(dǎo)出excel功能,現(xiàn)在也對這個導(dǎo)出功能進(jìn)行一個匯總整理寫出來，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue3封裝自己的分頁組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09