從javascript中觸發打印預覽的base64編碼的PDF

我查看了一下週圍的計算器，試圖找到一種方法來做到這一點，而現在找不到合適的答案。我需要能夠通過base64編碼的字符串在新窗口或iframe中加載PDF，並在加載後立即觸發其打印預覽。我可以使用這兩種方法輕鬆加載PDF，但實際上無法正確顯示打印預覽。這裏是我試過的：從javascript中觸發打印預覽的base64編碼的PDF

在新窗口中使用embed元素。即使在加載內容之後，調用window.print()也是空白的。
使用隱藏的動態創建的iframe與src="data:application/pdf;base64,JVBERi0..."並調用myFrame.contentWindow.print()。但是這給出了一個CORS錯誤。我不知道爲什麼，因爲我沒有通過iframe加載新域，只是內容。
打開一個新窗口，只有iframe元素（如＃2中的元素），並在整個窗口中調用打印件。這也顯示一個空白的白頁。
用數據uri打開一個新窗口並打印出來。 window.open('data:application/pdf;base64,JVBERi0...').print();。這也不起作用，因爲它甚至不顯示打印預覽。我也嘗試用setTimeout延遲它，但是這也沒有做任何事。

在這一點上，我以爲什麼沒有這些工作，特別是因爲在Chrome它顯示的自定義菜單欄這樣很困惑：

如果我點擊的實際打印圖標在那裏，打印預覽是完美的。無論Chrome在點擊該按鈕時做什麼，都正是我想要完成的。無論如何觸發該功能？還是有另一種方法來實現我想要的？只是爲了澄清，我只需要這個在Chrome中工作，我不需要擔心其他瀏覽器。

來源

2016-11-07 jtate

你有沒有設法得到它的工作？我試了一樣似乎沒有任何工作 – db306

@ db306不，我真的不認爲這是可能的，我試過了我能想到的一切。 Chrome瀏覽器中的PDF查看器實際上是一個插件，我不認爲可以通過javascript與它進行交互。我認爲可以用PDF.js來完成，但我沒有時間去嘗試並實現它 – jtate

我實際上設法讓它在彈出窗口上打印，但是，該函數會很快被觸發，因爲每個瀏覽器都有不同的閱讀器，所以我無法在pdf格式器上添加事件監聽器。唯一可行的方法是將pdf文件保存在服務器上，在隱藏的iframe上提供pdf，並在加載iframe時進行打印。希望這種幫助某人。謝謝 – db306

這裏是點＃3

打開只有像在＃2 iframe元素並調用整個窗口上的打印一個新的窗口中的溶液。這也顯示一個空白的白頁。

在你的情況下，它拋出的CORS錯誤，因爲看起來像iframe src你給base64String不是URL。這裏是你可以做的

把你base64String，將其轉換爲一個斑點
從斑點
生成一個URL提供生成的URL到iframe中的內容。
之後，您可以使用iframe.contentWindow.print（）打印內容;

下面是base64轉換成團塊

'use strict'; 

const b64toBlob = (b64Data, contentType='', sliceSize=512) => { 
     const byteCharacters = atob(b64Data); 

const byteArrays = []; 

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
     const slice = byteCharacters.slice(offset, offset + sliceSize), 
      byteNumbers = new Array(slice.length); 
     for (let i = 0; i < slice.length; i++) { 
      byteNumbers[i] = slice.charCodeAt(i); 
     } 
     const byteArray = new Uint8Array(byteNumbers); 

     byteArrays.push(byteArray); 
    } 

    const blob = new Blob(byteArrays, {type: contentType}); 
    return blob; 
} 


const contentType = "application/pdf", 
      b64Data = "YourBase64PdfString",//Replace this with your base64String 
      blob = this.b64toBlob(b64Data, contentType), 
      blobUrl = URL.createObjectURL(blob);

使用blboUrl於iframe的src中的代碼，一旦完成，你可以調用打印的iframe如下圖所示

const iframeEle = document.getElementById("Iframe"); 
     if (iframeEle) { 
      iframeEle.contentWindow.print(); 
     }

希望這可以幫助...上的base64成團塊

來源

2017-07-13 09:09:31 ptchand

從javascript中觸發打印預覽的base64編碼的PDF

回答

相關問題