前端實現PDF預覽打印的幾種方式

一、<embed> 標簽 展示PDF文件

HTML <embed> 元素將外部內容嵌入文檔中的指定位置，但是MDN上有提到，大多數現代瀏覽器已經棄用並取消了對瀏覽器插件的支持，所以建議盡量少用或者不用<embed>元素

<embed type="application/pdf" src={pdfUrl} title={pdfName} style={{ height: '100vh' }} />

這種方式適合純PDF文件展示。

 

二、<iframe> 標簽 實現展示、打印功能

1 html頁面添加iframe

<iframe style={{ width: '100%', height: '80vh'}} title="PDF文件" id="Iframe" src={pdfUrl} />

2 如果只是純展示，直接使用PDF路徑，如果需要在外部對PDF文件進行打印，可以通過js獲取PDF文件流，轉成base64格式的路徑來使用，避免iframe的跨域問題，視情況而定。

new Promise((resolve, reject): void => { axios({ baseURL: XXX, method: 'GET', url, params, responseType: 'blob' }).then((res): void => { let blob = new Blob([res.data], { type: 'application/pdf' }); resolve(URL.createObjectURL(blob));
 }).catch((err): void => { reject(err); }); });

3 調取瀏覽器的打印功能，打印PDF文件。對於css樣式不熟悉的人來說，這是最好的實現頁面局部打印的方式。

 const printIframe = document.getElementById("Iframe"); printIframe.contentWindow.print();

注意： 如果僅僅需要的是打印功能，PDF文件不想在頁面展示，只要把iframe的樣式display設置為none，就能在更為友好的情況下實現PDF的打印功能。

 

三、pdf.js庫

pdf.js庫是一款功能強大的PDF文件操作庫，這里就不細講，可以關注官網 的相關例子，原理就是通過canvas實現展示效果，這是和上面幾個例子不同的地方，好處就是，可以進一步對PDF文件進行修改，比較靈活。如果想要進一步實現打印效果，就需要比較好的CSS功底，通過樣式的調整，來實現打印頁面與當前預覽界面區別。

css中通過@media print，來修改print時候的預覽樣式

@media print {
    @page {
      margin: 7mm 0 !important;
      padding: 0;
    }
}