前端实现PDF预览打印的几种方式

您所在的位置：网站首页 › pdf打印界面不显示 › 前端实现PDF预览打印的几种方式

前端实现PDF预览打印的几种方式

2023-12-26 06:07| 来源: 网络整理| 查看: 265

一、标签展示PDF文件

HTML 元素将外部内容嵌入文档中的指定位置，但是MDN上有提到，大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以建议尽量少用或者不用元素

这种方式适合纯PDF文件展示。

二、标签实现展示、打印功能

1 html页面添加iframe

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; } }

【本文地址】

前端实现PDF预览打印的几种方式

前端实现PDF预览打印的几种方式

今日新闻

推荐新闻