Vue中保存數(shù)據(jù)到磁盤文件的方法
更新時(shí)間：2018年09月06日 14:23:40 作者：blue_tear
今天小編就為大家分享一篇Vue中保存數(shù)據(jù)到磁盤文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
網(wǎng)上有諸多例子，都不是在vue下，直接復(fù)制過(guò)來(lái)，可能會(huì)出現(xiàn)各類的錯(cuò)誤，折騰了若干個(gè)小時(shí)，終于搞定。
以app.vue為例
<mt-button size="small" @click="ExportData()" type="primary" style="margin:0px 10px 0px 0px">導(dǎo)出</mt-button>
下面在方法中定義函數(shù)
<code class="language-html">methods:{
ExportData(){
//定義文件內(nèi)容，類型必須為Blob 否則createObjectURL會(huì)報(bào)錯(cuò)
let content = new Blob([JSON.stringify(this.todos)])
//生成url對(duì)象
let urlObject = window.URL || window.webkitURL || window
let url = urlObject.createObjectURL(content)
//生成<a></a>DOM元素
let el = document.createElement('a')
//鏈接賦值
el.href = url
el.download ="todo文件導(dǎo)出.txt"
//必須點(diǎn)擊否則不會(huì)下載
el.click()
//移除鏈接釋放資源
urlObject.revokeObjectURL(url)
}
}</code>
需要注意的幾點(diǎn)
1、在chrome下是不能使用new activexobject進(jìn)行下載，這種方式只適用于ie
2、createObjectURL的參數(shù)必須是blob類型，不然會(huì)提示url.createObjectURL出錯(cuò)
搞定了導(dǎo)出，還需要可以導(dǎo)入數(shù)據(jù)才行，下次在弄
以上這篇Vue中保存數(shù)據(jù)到磁盤文件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vueCli?4.x升級(jí)5.x報(bào)錯(cuò):Progress?Plugin?Invalid?Options的解決方法
本文主要介紹了vueCli?4.x升級(jí)5.x報(bào)錯(cuò):Progress?Plugin?Invalid?Options的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
這篇文章主要介紹了Vue 自定義ColorPicker及使用方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
自定義指令,是Vue提供的一種擴(kuò)展和定制的機(jī)制,使開(kāi)發(fā)者能夠在組件中直接操作DOM、處理事件、添加樣式等,并提供了與第三方庫(kù)集成的方式,定義指令使得Vue在處理交互和DOM操作時(shí)更加靈活和強(qiáng)大,本文將帶大家搞懂Vue中的自定義指令,需要的朋友可以參考下2023-07-07
Vue自定義指令實(shí)現(xiàn)checkbox全選功能的方法
下面小編就為大家分享一篇Vue自定義指令實(shí)現(xiàn)checkbox全選功能的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue.js中使用Vuex實(shí)現(xiàn)組件數(shù)據(jù)共享案例
這篇文章主要介紹了Vue.js中使用Vuex實(shí)現(xiàn)組件數(shù)據(jù)共享案例,具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue實(shí)現(xiàn)對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色
這篇文章主要介紹了vue實(shí)現(xiàn)對(duì)highlight-current-row方式整行選中后修改默認(rèn)背景顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue5中的事件修飾符(style)和template，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件
這篇文章主要介紹了vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
解決vue項(xiàng)目中前后端交互的跨域問(wèn)題、nginx代理配置方式
這篇文章主要介紹了解決vue項(xiàng)目中前后端交互的跨域問(wèn)題、nginx代理配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09