vue 使用post/get 下載導出文件操作

更新時間：2020年08月07日 10:15:11 作者：心郎

這篇文章主要介紹了vue 使用post/get 下載導出文件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

我就廢話不多說了，大家還是直接看代碼吧~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>前端項目下載導出文件</title>
	</head>
	<body>
		<script>
			
		/**
		 * post 方式 
		 * 返回：文件流
		 * 好處：可以自己修改文件名稱 方便調(diào)試
		 */
	  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 方式
		 * 返回：文件流
		 * 好處：前臺什么都不需要處理 完全后臺處理
		 * 缺點：不變調(diào)試（需要確保后臺接口穩(wěn)定）
		 */
		let exportURL = `api/sysLog/export?content=${content}&ip=${ip}`;
   	window.open(exportURL, "_blank")
		
		</script>
	</body>
</html>

補充知識：雙向數(shù)據(jù)綁定原理(三種實現(xiàn)方式)

大家還是看看代碼吧~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>雙向數(shù)據(jù)綁定原理(三種實現(xiàn)方式)</title>
	</head>
	<body>
		<input type="text" id="a" />
		<span id="b"></span>
		<!--
			
			//臟檢查
			我們說Angularjs（這里特指AngularJS 1.x.x版本，不代表AngularJS 2.x.x版本）雙向數(shù)據(jù)綁定的技術實現(xiàn)是臟檢查，大致的原理就是，
			Angularjs內(nèi)部會維護一個序列，將所有需要監(jiān)控的屬性放在這個序列中，當發(fā)生某些特定事件時（注意，
			這里并不是定時的而是由某些特殊事件觸發(fā)的），Angularjs會調(diào)用 $digest 方法，這個方法內(nèi)部做的邏輯就是遍歷所有的watcher，
			對被監(jiān)控的屬性做對比，對比其在方法調(diào)用前后屬性值有沒有發(fā)生變化，如果發(fā)生變化，則調(diào)用對應的handler。
			網(wǎng)上有許多剖析Angularjs雙向數(shù)據(jù)綁定實現(xiàn)原理的文章，比如 這篇 ，再比如 這篇 ，等等。
			這種方式的缺點很明顯，遍歷輪訓watcher是非常消耗性能的，特別是當單頁的監(jiān)控數(shù)量達到一個數(shù)量級的時候。
			
			//觀察機制
			博主之前有一篇轉載翻譯的文章， Object.observe()帶來的數(shù)據(jù)綁定變革 ，說的就是使用ECMAScript7中的 Object.observe 方法對對象
			（或者其屬性）進行監(jiān)控觀察，一旦其發(fā)生變化時，將會執(zhí)行相應的handler。
			這是目前監(jiān)控屬性數(shù)據(jù)變更最完美的一種方法，語言（瀏覽器）原生支持，沒有什么比這個更好了。唯一的遺憾就是目前支持廣度還不行，有待全面推廣。
			
			//封裝屬性訪問器
			國產(chǎn)mvvm框架vue.js實現(xiàn)數(shù)據(jù)雙向綁定的原理就是屬性訪問器。
			它使用了ECMAScript5.1（ECMA-262）中定義的標準屬性 Object.defineProperty 方法。針對國內(nèi)行情，
			部分還不支持 Object.defineProperty 低級瀏覽器采用VBScript作了完美兼容，不像其他的mvvm框架已經(jīng)逐漸放棄對低端瀏覽器的支持。
			
		-->
		<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 下載導出文件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: