vue 使用post/get 下載導(dǎo)出文件操作
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>前端項(xiàng)目下載導(dǎo)出文件</title></head><body><script>/** * post 方式 * 返回：文件流 * 好處：可以自己修改文件名稱 方便調(diào)試 */ let params ={ ListData : this.ListData } _this.$http.post(url,params,{responseType:'arraybuffer'} //必須添加項(xiàng) ).then(function(res) { console.log(res) var blob = new Blob([res.data], {type: ’application/msword;charset=utf-8’}); var filename = 'download.doc'; var a = document.createElement(’a’); var url = window.URL.createObjectURL(blob); a.href = url; a.download = filename; var body = document.getElementsByTagName(’body’)[0]; body.appendChild(a); a.click(); body.removeChild(a); window.URL.revokeObjectURL(url);}/** * get 方式 * 返回：文件流 * 好處：前臺(tái)什么都不需要處理 完全后臺(tái)處理 * 缺點(diǎn)：不變調(diào)試（需要確保后臺(tái)接口穩(wěn)定） */let exportURL = `api/sysLog/export?content=${content}&ip=${ip}`; window.open(exportURL, '_blank')</script></body></html>
補(bǔ)充知識(shí)：雙向數(shù)據(jù)綁定原理(三種實(shí)現(xiàn)方式)
大家還是看看代碼吧~
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>雙向數(shù)據(jù)綁定原理(三種實(shí)現(xiàn)方式)</title></head><body><input type='text' /><span id='b'></span><!--//臟檢查我們說(shuō)Angularjs（這里特指AngularJS 1.x.x版本，不代表AngularJS 2.x.x版本）雙向數(shù)據(jù)綁定的技術(shù)實(shí)現(xiàn)是臟檢查，大致的原理就是，Angularjs內(nèi)部會(huì)維護(hù)一個(gè)序列，將所有需要監(jiān)控的屬性放在這個(gè)序列中，當(dāng)發(fā)生某些特定事件時(shí)（注意，這里并不是定時(shí)的而是由某些特殊事件觸發(fā)的），Angularjs會(huì)調(diào)用 $digest 方法，這個(gè)方法內(nèi)部做的邏輯就是遍歷所有的watcher，對(duì)被監(jiān)控的屬性做對(duì)比，對(duì)比其在方法調(diào)用前后屬性值有沒(méi)有發(fā)生變化，如果發(fā)生變化，則調(diào)用對(duì)應(yīng)的handler。網(wǎng)上有許多剖析Angularjs雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理的文章，比如 這篇 ，再比如 這篇 ，等等。這種方式的缺點(diǎn)很明顯，遍歷輪訓(xùn)watcher是非常消耗性能的，特別是當(dāng)單頁(yè)的監(jiān)控?cái)?shù)量達(dá)到一個(gè)數(shù)量級(jí)的時(shí)候。//觀察機(jī)制博主之前有一篇轉(zhuǎn)載翻譯的文章， Object.observe()帶來(lái)的數(shù)據(jù)綁定變革 ，說(shuō)的就是使用ECMAScript7中的 Object.observe 方法對(duì)對(duì)象（或者其屬性）進(jìn)行監(jiān)控觀察，一旦其發(fā)生變化時(shí)，將會(huì)執(zhí)行相應(yīng)的handler。這是目前監(jiān)控屬性數(shù)據(jù)變更最完美的一種方法，語(yǔ)言（瀏覽器）原生支持，沒(méi)有什么比這個(gè)更好了。唯一的遺憾就是目前支持廣度還不行，有待全面推廣。//封裝屬性訪問(wèn)器國(guó)產(chǎn)mvvm框架vue.js實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理就是屬性訪問(wèn)器。它使用了ECMAScript5.1（ECMA-262）中定義的標(biāo)準(zhǔn)屬性 Object.defineProperty 方法。針對(duì)國(guó)內(nèi)行情，部分還不支持 Object.defineProperty 低級(jí)瀏覽器采用VBScript作了完美兼容，不像其他的mvvm框架已經(jīng)逐漸放棄對(duì)低端瀏覽器的支持。--><script>//封裝屬性訪問(wèn)器//Object.defineProperty(obj, prop, descriptor)//obj ，待修改的對(duì)象//prop ，帶修改的屬性名稱//descriptor ，待修改屬性的相關(guān)描述var obj = {};Object.defineProperty(obj,’a’,{set:function(newVal){document.getElementById(’a’).value = newVal;document.getElementById(’b’).innerHTML = newVal;}});document.addEventListener(’keyup’,function(e){obj.a = e.target.value;});</script></body></html>
以上這篇vue 使用post/get 下載導(dǎo)出文件操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備