vue 使用post/get 下载导出文件操作


Posted in Javascript onAugust 07, 2020

我就废话不多说了,大家还是直接看代码吧~

<!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 下载导出文件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 #Javascript
vue 在methods中调用mounted的实现操作
Aug 07 #Javascript
javascript实现图片轮换动作方法
Aug 07 #Javascript
vue style width a href动态拼接问题的解决
Aug 07 #Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 #Javascript
JavaScript实现与web通信的方法详解
Aug 07 #Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 #Javascript
You might like
php实现图片等比例缩放代码
2015/07/23 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
Vue函数式组件的应用实例详解
2019/08/30 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python lxml中etree的简单应用
2019/05/10 Python
解决pip install psycopg2出错问题
2020/07/09 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
教师自我评价范文
2013/12/16 职场文书
考试不及格检讨书
2014/01/09 职场文书
实习单位接收函
2014/01/11 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
政治学求职信
2014/06/03 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
python使用glob检索文件的操作
2021/05/20 Python