前端实现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;
    }
}