vue使用post下载文件兼容ie以及get下载

最新推荐文章于 2022-08-31 15:57:15 发布

xielatian

最新推荐文章于 2022-08-31 15:57:15 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： post blob vue javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_43979503/article/details/109910361

笔记专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现前端文件下载的方法，包括通过POST和GET请求的方式进行资源下载，并针对不同浏览器提供了兼容性处理方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div>
	<el-button @cilck="downTextPost">post下载</el-botton>
	<el-button @cilck="downTextGet">post下载</el-botton>
	
<div>
<script>
	export default{
		data(){},
		methods:{	
			downTextPost(){
				this.axios({
					method:'post',
					url:'http:www.aaa.com'
					data:{},
					headers: {
                    'Authorization': $states.getToken(), // 请求token
                    'Content-Type': "application/json;charset=utf-8"
                	},
                	responseType:'bolb'
				}).then(res=>{
						
                 		
                // IE兼容
                if (window.navigator.msSaveOrOpenBlob) {
                    window.navigator.msSaveOrOpenBlob(blob, fileName);
        　　　　} else {
					var blob = new Blob([res.data], 
					{type: 'application/msword;application/vnd.ms-excel;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);
					}
				})
			},
			downTextGet(){
				window.location.href ='http:www.aaa.com';
				//或者window.open('http:www.aaa.com')
			},
		}
	}
</script>