前端处理后端传来的文件流实现下载或预览

版权声明:本文为博主原创文章 https://blog.csdn.net/qq_33599109/article/details/86010190
直接下载
var url = this.GLOBAL_URL + "/api/GetFile?id=" + id;		// 请求的url + id
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true)
xhr.responseType = "blob";
xhr.setRequestHeader("client_type", "DESKTOP_WEB");
xhr.setRequestHeader("Authorization", token);			// 自定义请求头
xhr.onload = function(){
	if(this.status == 200){
		var blob = this.response;
		var fileName = filename;
		if(window.navigator.msSaveOrOpenBlob){			// IE浏览器下
			navigator.msSaveBlob(blob, fileName);
		} else {
			var  link = document.createElement("a");
			link.href = window.URL.createObjectURL(blob);
			link.download = fileName;
			link.click();
			window.URL.revokeObjectURL(link.href);
		}
	}
};
xhr.send()
在线预览

在线预览我们需要借助pdf.js,下载地址:https://github.com/wwjhzc/pdf
在这里插入图片描述
打开pdf文件,找到viewer.js,搜索 var DEFAULT_URL 把内容置空,即 var DEFAULT_URL = ‘’;
使用: window.open(’/static/pdf/web/viewer.html?file=’ + window.URL.createObjectURL(blob))

xhr.onload = function(){
	if(this.status == 200){
		var blob = this.response;
		var fileName = filename;
		window.open('/static/pdf/web/viewer.html?file=' + window.URL.createObjectURL(blob))
	}
};

没有更多推荐了,返回首页