在Vue中前端处理后端返回的二进制的pdf.js文件流

直接下载

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文件，下载地址：mozilla.github.io/pdf.js/gett…

• 把下载好的PDF.js 文件夹放到项目的静态资源目录中（index.html哪里的目录）

vue代码

+ <iframe
        id="previewPdf"
        :src="'/pdfjs-2.0.943-dist/web/viewer.html?file=' + fileUrl +'&.pdf '"
        style="height: 42.5rem /* 680/16 */;"
        width="100%"
      ></iframe>
复制代码

js代码

+  download (POSTData) {
      var oReq = new XMLHttpRequest()
      oReq.open('POST', `${axiosrequest.baseUrl}/api/Report/GetReport`, true)
      oReq.setRequestHeader('Content-type', 'application/json;charset=UTF-8')
      oReq.setRequestHeader('user_token', gettoken())
      oReq.setRequestHeader('signature', 'signature')
      oReq.responseType = 'blob'
      oReq.onload = oEvent => {
        var arrayBuffer = oReq.response // 注意:不是oReq.responseText
        if (arrayBuffer) {
          let openUrl = window.URL.createObjectURL(arrayBuffer)
          // console.log(openUrl)
          this.fileUrl = openUrl
          // 关闭遮罩
          this.loading = false
        }
      }
      oReq.send(JSON.stringify(POSTData))
    } 
复制代码

呈现效果如图所示