從二進制字符串或base64在Internet Explorer 11中顯示嵌入的PDF

Question

有一個第三方服務，它以二進制字符串或base64編碼發送給我一個PDF文件。 是否有可能使用二進制字符串或base64編碼顯示嵌入在IE 11中的PDF。

從SO和其他論壇，我得出結論，IE 11僅支持數據uri用於圖像而不支持PDF（我可能錯了），它排除了base64。 所以剩下的唯一選擇就是從二進制字符串中顯示。 我在節點應用程序中使用它，但我沒有選擇先將檢索到的文件保存到節點服務器並使用靜態URL。

如果在IE 11中可以實現以上目的，請告訴我。

目前我正在嘗試使用https://github.com/pipwerks/PDFObject的 npm包。 對於Chrome和Firefox，我檢索base64文件並使用上面的包嵌入它並且工作正常。

Answer 1

此解決方案使用pdf.js

使用PDF.js庫渲染base64 PDF的關鍵步驟

• 首先使用atob解碼它
• 然后使用上面的解碼數據初始化Uint8Array

摘自express-pdfjs / scripts / App.js

let options = {
      method: 'GET',
      uri: 'http://localhost:5000/getBase64Pdf',
      resolveWithFullResponse: true
    }
rp(options)
  .then((response) => {
    if (response.statusCode !== 200) {
      console.error('http not 200 but : ', response.statusCode)
    } else {
      console.info('connected successfully : ' + response.statusCode)
      let pdfData = atob(response.body)
      let uint8ArrayPdf = new Uint8Array(pdfData.length)
      for (let i = 0; i < pdfData.length; i++) {
        uint8ArrayPdf[i] = pdfData.charCodeAt(i)
      }
      let pdfjsframe = document.getElementById('pdfViewer');
      pdfjsframe.contentWindow.PDFViewerApplication.open(uint8ArrayPdf);
    }
  })

pdfViewer是index.html中的iframe

<iframe id="pdfViewer" src="http://localhost:3000/express-pdfjs/pdfViewer/web/viewer.html" height="1600" width="850" />

請在客戶端使用React找到一個示例實現@ https://github.com/rohanray/so-pdf-base64

更新：另請參閱@ user3590235答案： 在二進制字符串或base64中顯示Internet Explorer 11中的嵌入式PDF

Answer 2

在與@roray討論之后 - 我在這里的菜單上添加了一個稍微不同的解決方案:)首先：1。不使用base64字符串（盡管可能）。 2.我正在使用pdf.js的viewer.html查看器來處理asp mvc 3.

所以，從服務器/控制器獲取db文件並返回bites

public ActionResult LoadFile(int id)
{
   var file = db.Files.Where(i => i.Id == id).FirstOrDefault();
   return File(file.BinaryFile, MediaTypeNames.Application.Pdf, "Name.pdf");
}

在視圖/ html中添加一個iframe，其中包含未指定的源代碼（src =“”）或者可以在頁面加載事件中動態創建它.BTW，我嘗試使用FF / Chrome / Edge / IE 11找到對象，嵌入和iframe並找到iframe似乎始終如一地運作。 不喜歡iframe：/

 <iframe src="" name="printDoc" id="printDoc" width="800" height="1000" type="application/pdf"></iframe> 

最后，在你的腳本標簽中。 這可以通過Ajax完成。 基本上，文檔准備好后立即調用服務器，以字節為單位獲取文件，轉換為blob url， 將blob url附加到項目中“/web/viewer.html?file=”的相對位置並更新src =“”iframe的屬性。

  $(document).ready(function myfunction() { var xhr = new XMLHttpRequest(); // works for EDGE/Chrome/FFox xhr.open("GET", "/Documents/LoadFile/" + fileId, true); xhr.responseType = "blob"; xhr.onload = function (e) { if (this.status === 200) { var blob = new Blob([this.response], { type: 'application/pdf' }); console.log('Not IE 11'); var url = window.URL.createObjectURL(blob); _iFrame = document.querySelector("#printDoc"); _iFrame.setAttribute('src', '/web/viewer.html?file=' + url); } }; xhr.send(); }); 

這將打開嵌入在iframe中的viewer.html中嵌入的pdf。 MS Edge可以正常使用，但不會將blob url作為查詢參數發送到地址欄，這顯然是FF / Chrome支持的。 而且，這就是我選擇這個選項的原因。

PS。 IE 11對我來說仍然沒有希望所以我使用了var blob = new Blob（[this.response]，{type：'application / pdf'}）; window.navigator.msSaveOrOpenBlob（blob，fileName）;如果你發現，請告訴我一種提高IE 11性能的方法