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

最新推荐文章于 2025-06-20 11:45:36 发布

kuke_kuke

最新推荐文章于 2025-06-20 11:45:36 发布

阅读量2.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：前端下载预览文件流

本文链接：https://blog.youkuaiyun.com/qq_33599109/article/details/86010190

web前端专栏收录该内容

27 篇文章

订阅专栏

直接下载

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