Vue中保存數(shù)據(jù)到磁盤文件的方法
更新時間：2018年09月06日 14:23:40 作者：blue_tear
今天小編就為大家分享一篇Vue中保存數(shù)據(jù)到磁盤文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
網(wǎng)上有諸多例子，都不是在vue下，直接復制過來，可能會出現(xiàn)各類的錯誤，折騰了若干個小時，終于搞定。
以app.vue為例
<mt-button size="small" @click="ExportData()" type="primary" style="margin:0px 10px 0px 0px">導出</mt-button>
下面在方法中定義函數(shù)
<code class="language-html">methods:{
ExportData(){
//定義文件內容，類型必須為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文件導出.txt"
//必須點擊否則不會下載
el.click()
//移除鏈接釋放資源
urlObject.revokeObjectURL(url)
}
}</code>
需要注意的幾點
1、在chrome下是不能使用new activexobject進行下載，這種方式只適用于ie
2、createObjectURL的參數(shù)必須是blob類型，不然會提示url.createObjectURL出錯
搞定了導出，還需要可以導入數(shù)據(jù)才行，下次在弄
以上這篇Vue中保存數(shù)據(jù)到磁盤文件的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue3.0導出數(shù)據(jù)為自定義樣式Excel的詳細實例
在許多的后臺系統(tǒng)中少不了導出Excel表格的功能,下面這篇文章主要給大家介紹了關于Vue3.0導出數(shù)據(jù)為自定義樣式Excel的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復雜的生態(tài)中，Vue.js有幸受到一定程度的關注，所以本文將從各方面對Vue.js的組件開發(fā)做一個深入介紹。有需要的朋友們可以參考借鑒。2016-10-10
element?ui富文本編輯器的使用效果與步驟(quill-editor)
富文本編輯器在任何項目中都會用到,在Element中我們推薦vue-quill-editor組件,下面這篇文章主要給大家介紹了關于element?ui富文本編輯器的使用效果與步驟(quill-editor)的相關資料,需要的朋友可以參考下2022-10-10
Vue Router目前最新版本是4.X，本文主要主要介紹了10分鐘快速上手VueRouter4.x教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本篇文章主要介紹了詳解用vue編寫彈出框組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
詳解基于Vue cli開發(fā)修改外部組件Vant默認樣式
這篇文章主要介紹了詳解基于Vue cli開發(fā)修改外部組件Vant默認樣式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
vue?parseHTML函數(shù)源碼解析start鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML函數(shù)源碼解析start鉤子函數(shù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue移動端使用canvas簽名的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要給大家介紹了關于uniapp的核心知識，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-10-10
這篇文章主要介紹了vue列表自動滾動實例代碼,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10