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 方式 
		 * 返回：文件流
		 * 好处：可以自己修改文件名称 方便调试
		 */
	  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" id="a" />
		<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 下载导出文件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-cli 打包使用history模式的后端配置实例
今天小编就为大家分享一篇vue-cli 打包使用history模式的后端配置实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue中的input框点击后不聚焦问题
这篇文章主要介绍了vue中的input框点击后不聚焦问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue中实现打印功能的几种方法示例
这篇文章主要给大家介绍了关于vue中实现打印功能的几种方法,打印功能在实际开发中非常常见,通常我们需要将网页中的某一部分或整个网页打印出来,需要的朋友可以参考下
2023-09-09
使用vue-cli（vue脚手架）快速搭建项目的方法
本篇文章主要介绍了使用vue-cli（vue脚手架）快速搭建项目的方法，vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，感兴趣的小伙伴们可以参考一下
2018-05-05
Vue3自定义drag指令详解
这篇文章主要为大家详细介绍了Vue3自定义drag指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
vue中v-for数据状态值变了,但是视图没改变的解决方案
这篇文章主要介绍了vue中v-for数据状态值变了，但是视图没改变的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue的axios请求改变content-type为form-data问题
这篇文章主要介绍了vue的axios请求改变content-type为form-data问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue项目实现路由跳转到新页面,返回旧页面,保留之前的数据记录(操作代码)
这篇文章主要介绍了vue项目实现路由跳转到新页面，返回旧页面，保留之前的数据记录,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
vue实现简单购物车案例
这篇文章主要为大家详细介绍了vue实现简单购物车案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
Vue文件如何转换成base64并去除多余的文件类型前缀
这篇文章主要介绍了Vue文件如何转换成base64并去除多余的文件类型前缀问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03