vue Download export file operation using post and get

2021-08-06 19:57:04
OfStack

I won't talk too much, let's just look at the code ~


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> Download export file for front-end project </title>
	</head>
	<body>
		<script>
			
		/**
		 * post  Mode  
		 *  Return: File stream 
		 *  Benefit: You can modify the file name yourself   Convenient debugging 
		 */
	  let params ={      
			ListData : this.ListData     
		}
   	_this.$http.post(url,params,{responseType:"arraybuffer"} // You must add an item 
    ).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  Mode 
		 *  Return: File stream 
		 *  Benefits: The front desk doesn't need to deal with anything   Full background processing 
		 *  Disadvantages: Constant debugging (need to ensure stable background interface) 
		 */
		let exportURL = `api/sysLog/export?content=${content}&ip=${ip}`;
   	window.open(exportURL, "_blank")
		
		</script>
	</body>
</html>

Additional knowledge: the principle of bidirectional data binding (3 implementations)

Let's take a look at the code ~


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> Principle of bidirectional data binding (3 Kinds of implementation methods )</title>
	</head>
	<body>
		<input type="text" id="a" />
		<span id="b"></span>
		<!--
			
			// Dirty examination 
			 We say Angularjs (Here specifically refers to AngularJS 1.x.x Version, does not mean AngularJS 2.x.x Version) the technical implementation of bidirectional data binding is dirty checking, and the general principle is that, 
			Angularjs Internal maintenance 1 You put all the attributes that you need to monitor in this sequence when certain events occur (note, 
			 This is not timed but triggered by some special events), Angularjs Will call  $digest  Method, the logic inside this method is to traverse all watcher , 
			 Compare the monitored attributes, compare whether their attribute values change before and after the method call, and if so, call the corresponding handler . 
			 There are many anatomies on the Internet Angularjs Articles on the implementation principles of bidirectional data binding, such as   This article   , for example   This article   , wait. 
			 The disadvantages of this method are obvious, traversing rotation training watcher Is very performance-consuming, especially when the number of monitoring pages per page reaches 1 At an order of magnitude. 
			
			// Observation mechanism 
			 Bloggers have before 1 Reprinted and translated articles,  Object.observe() Data binding changes brought about by   , which means using ECMAScript7 In  Object.observe  Method against an object 
			 (or its attributes) to monitor and observe, 1 When it changes, the corresponding handler . 
			 This is the perfect way to monitor attribute data changes at present 1 There is nothing better than this method, language (browser) native support. Only 1 Unfortunately, the breadth of support is not enough at present, and it needs to be fully promoted. 
			
			// Encapsulate property accessor 
			 Domestic mvvm Framework vue.js The principle of data bidirectional binding is property accessor. 
			 It uses ECMAScript5.1 ( ECMA-262 Standard attributes defined in)  Object.defineProperty  Method. In view of the domestic market, 
			 Some of them are not supported yet  Object.defineProperty  Low-level browsers adopt VBScript Made perfect compatibility, unlike other ones mvvm The framework has gradually abandoned its support for low-end browsers. 
			
		-->
		<script>
		
			// Encapsulate property accessor 
			//Object.defineProperty(obj, prop, descriptor)
			//obj  Objects to be modified 
			//prop  Attribute name with modifications 
			//descriptor  Description of the attribute to be modified 
			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>