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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
js微信分享API
Oct 11 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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
sql注入与转义的php函数代码
2013/06/17 PHP
YII实现分页的方法
2014/07/09 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
window.open的功能全解析
2006/10/10 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python随机生成彩票号码的方法
2015/03/05 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python中logging实例讲解
2019/01/17 Python
Python和Sublime整合过程图示
2019/12/25 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
旷课检讨书2000字
2014/01/14 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
节能环保演讲稿
2014/08/28 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
升学宴家长答谢词
2015/09/29 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
nginx内存池源码解析
2021/11/20 Servers
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL