如何在我的網頁的iframe中使用Javascript預覽從外部API生成的PDF文件？

Question

我一直在試圖找到一個在線的例子，其中PDF由外部API返回（文件在響應中發送，Content-Type設置爲application/pdf的響應頭），然後文件在JS中處理並顯示在嵌入式div/iframe中。

我一直在試圖找到一個使用PDF.js或PDFObject的例子，但我可以找到使用服務器上託管的PDF文件的直接路徑。我需要在客戶端執行此操作，並且只能使用API​​檢索文件。

我很抱歉如果已經回覆了某個地方，但我找不到與我的請求相符的任何內容，我希望我的描述足夠好！

//Pseudo code of what I'd like to achieve 
$.get('http.service.com/getPDF', function(data) { 
    var pdfString = changeDataToPDFString(data); 

    magicLibrary.previewPDF(pdfString, $('#container_pdf')); 
} 

Answer 1

對於這樣一個絆腳石，這裏是我使用RequireJS和PDFJS的非常具體的解決方案。

 changeDataToPDFString: function(file) { 
     var base64ToUint8Array = function(base64) { 
      var raw = atob(base64), 
       uint8Array = new Uint8Array(raw.length); 

      for (var i = 0; i < raw.length; i++) { 
       uint8Array[i] = raw.charCodeAt(i); 
      } 

      return uint8Array; 
     }, 
     base64Data = file.split(',')[1], 
     pdfData = base64ToUint8Array(base64Data); 

     return pdfData; 
    }, 
    renderPDF: function(file, container) { 
     var self = this, 
      pdfData = self.changeDataToPDFString(file); 

     require(['pdfjs-dist/build/pdf'], function(app){ 
      var iframe; 

      if(container.find('iframe').length) { 
       iframe = container.find('iframe')[0]; 
       iframe.contentWindow.PDFViewerApplication.open(pdfData); 
      } 
      else { 
       iframe = $('<iframe src="js/lib/pdfjs/web/viewer.html" style="width: 100%; height: 700px;" allowfullscreen="" webkitallowfullscreen=""></iframe>')[0]; 
       iframe.onload = function() { 
        iframe.contentWindow.PDFViewerApplication.open(pdfData); 
       } 
       container.append(iframe); 
      } 
     }); 
    }