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

直接下载

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))
	}
};