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