要求通过地址获取文件流 但是我这边需要在header中带token  所以 直接访问window.open(url)地址报没有权限
 
所以通过访问接口地址返回文件流通过流文件创建文件对象展示在新的窗口。
 
      handlePreview (file) {
        const _this = this
        _this.$http({
          url: _this.$http.adornUrl('file/' + file.url),
          method: 'get',
          responseType: 'blob',
        }).then(({ data }) => {
          window.open(window.URL.createObjectURL(data), '_blank')
        })
      },
 
 

条件：1、后台返回是base64文件流
 
           2、兼容ie浏览器打开
 
           3、存放于vue工程里面
 
 
 
直接跳过花言巧语，切入主题来实现：
 
1、预览按钮click===获取base64文件流存入缓存。注意太大了超过存储了，最好做下类似这样的处理。
 
2、viewer.html文件的viewer.js前面引入这样的处理，并配置全局公共变量。进行转成pdf识别的进制数。
 
3、配置全局，放弃局部变量
 
4、针对viewer.js进行局部配置。来兼容ie浏览器（replace不识别。是file当做文件对象而不是字符串url字符串）。从而配置下面即可： IE关键是这个

直接下载
 
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))
	}
};

参考大佬博客
 
https://blog.csdn.net/m0_37852904/article/details/95992267?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1
 
 
 
<!--预览对话框-->
         <el-dialog class="pdf" :visible.sync="fileType">
             <p class="arrow">
                 <!--上一页-->
                 <span @click="changePdfPage(0)" class="turn addBtn" :class="{grey: currentPage==1}">上一页</span> {{currentPage}} / {{pageCount}}
                 <!--下一页-->
                 <span @click="changePdfPage(1)" class="turn addBtn" :class="{grey: currentPage==pageCount}">下一页</span>
             </p>
             <!--自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了-->
             <!--src需要展示的PDF地址-->
             <!--当前展示的PDF页码 -->
             <!--PDF文件总页码-->
             <!--一开始加载的页面-->
             <!--加载事件--><!-- @page-loaded="currentPage=$event" -->
             <pdf :src="src" :page="currentPage" @num-pages="pageCount=$event"  @loaded="loadPdfHandler">
             </pdf>
         </el-dialog>
 
seeMenu(id) {
 
             let url = url?id=id;
                 _this.$axios.get(url, {
                     responseType: 'blob',
                     'Content-Type': 'application/pdf'
                 }).then(res => {
                     let content = res.data;
                     let url="";
                     if (window.createObjectURL != undefined) { // basic
                               url = window.createObjectURL(content);
                             } else if (window.webkitURL != undefined) { // webkit or chrome
                               try {
                                 url = window.webkitURL.createObjectURL(content);
                               } catch (error) {
                     
                               }
                             } else if (window.URL != undefined) { // mozilla(firefox)
                               try {
                                 url = window.URL.createObjectURL(content);
                               } catch (error) {
                     
                               }
                             }
                     this.src=url;
               
                 })
 
}