在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))
    } 
複製代碼

呈現效果如圖所示