快捷導(dǎo)航

vue 使用post/get 下載導(dǎo)出文件操作

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

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

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

<!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" id="a" />
		<span id="b"></span>
		<!--
			
			//臟檢查
			我們說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)用前后屬性值有沒有發(fā)生變化，如果發(fā)生變化，則調(diào)用對(duì)應(yīng)的handler。
			網(wǎng)上有許多剖析Angularjs雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理的文章，比如 這篇 ，再比如 這篇 ，等等。
			這種方式的缺點(diǎn)很明顯，遍歷輪訓(xùn)watcher是非常消耗性能的，特別是當(dāng)單頁的監(jiān)控?cái)?shù)量達(dá)到一個(gè)數(shù)量級(jí)的時(shí)候。
			
			//觀察機(jī)制
			博主之前有一篇轉(zhuǎn)載翻譯的文章， Object.observe()帶來的數(shù)據(jù)綁定變革 ，說的就是使用ECMAScript7中的 Object.observe 方法對(duì)對(duì)象
			（或者其屬性）進(jìn)行監(jiān)控觀察，一旦其發(fā)生變化時(shí)，將會(huì)執(zhí)行相應(yīng)的handler。
			這是目前監(jiān)控屬性數(shù)據(jù)變更最完美的一種方法，語言（瀏覽器）原生支持，沒有什么比這個(gè)更好了。唯一的遺憾就是目前支持廣度還不行，有待全面推廣。
			
			//封裝屬性訪問器
			國(guó)產(chǎn)mvvm框架vue.js實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理就是屬性訪問器。
			它使用了ECMAScript5.1（ECMA-262）中定義的標(biāo)準(zhǔn)屬性 Object.defineProperty 方法。針對(duì)國(guó)內(nèi)行情，
			部分還不支持 Object.defineProperty 低級(jí)瀏覽器采用VBScript作了完美兼容，不像其他的mvvm框架已經(jīng)逐漸放棄對(duì)低端瀏覽器的支持。
			
		-->
		<script>
		
			//封裝屬性訪問器
			//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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: