vue 使用post/get 下載導出文件操作
我就廢話不多說了，大家還是直接看代碼吧~
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>前端項目下載導出文件</title></head><body><script>/** * post 方式 * 返回：文件流 * 好處：可以自己修改文件名稱 方便調試 */ let params ={ ListData : this.ListData } _this.$http.post(url,params,{responseType:'arraybuffer'} //必須添加項 ).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 方式 * 返回：文件流 * 好處：前臺什么都不需要處理 完全后臺處理 * 缺點：不變調試（需要確保后臺接口穩定） */let exportURL = `api/sysLog/export?content=${content}&ip=${ip}`; window.open(exportURL, '_blank')</script></body></html>
補充知識：雙向數據綁定原理(三種實現方式)
大家還是看看代碼吧~
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>雙向數據綁定原理(三種實現方式)</title></head><body><input type='text' /><span id='b'></span><!--//臟檢查我們說Angularjs（這里特指AngularJS 1.x.x版本，不代表AngularJS 2.x.x版本）雙向數據綁定的技術實現是臟檢查，大致的原理就是，Angularjs內部會維護一個序列，將所有需要監控的屬性放在這個序列中，當發生某些特定事件時（注意，這里并不是定時的而是由某些特殊事件觸發的），Angularjs會調用 $digest 方法，這個方法內部做的邏輯就是遍歷所有的watcher，對被監控的屬性做對比，對比其在方法調用前后屬性值有沒有發生變化，如果發生變化，則調用對應的handler。網上有許多剖析Angularjs雙向數據綁定實現原理的文章，比如 這篇 ，再比如 這篇 ，等等。這種方式的缺點很明顯，遍歷輪訓watcher是非常消耗性能的，特別是當單頁的監控數量達到一個數量級的時候。//觀察機制博主之前有一篇轉載翻譯的文章， Object.observe()帶來的數據綁定變革 ，說的就是使用ECMAScript7中的 Object.observe 方法對對象（或者其屬性）進行監控觀察，一旦其發生變化時，將會執行相應的handler。這是目前監控屬性數據變更最完美的一種方法，語言（瀏覽器）原生支持，沒有什么比這個更好了。唯一的遺憾就是目前支持廣度還不行，有待全面推廣。//封裝屬性訪問器國產mvvm框架vue.js實現數據雙向綁定的原理就是屬性訪問器。它使用了ECMAScript5.1（ECMA-262）中定義的標準屬性 Object.defineProperty 方法。針對國內行情，部分還不支持 Object.defineProperty 低級瀏覽器采用VBScript作了完美兼容，不像其他的mvvm框架已經逐漸放棄對低端瀏覽器的支持。--><script>//封裝屬性訪問器//Object.defineProperty(obj, prop, descriptor)//obj ，待修改的對象//prop ，帶修改的屬性名稱//descriptor ，待修改屬性的相關描述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 下載導出文件操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
相關文章：
網公網安備