前端实现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' });
ateObjectURL(blob));
}).catch((err): void => {
reject(err);
});
});
3 调取浏览器的打印功能，打印PDF⽂件。对于css样式不熟悉的⼈来说，这是最好的实现页⾯局部打印的⽅式。
const printIframe = ElementById("Iframe");
pdf转html注意：如果仅仅需要的是打印功能，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;
}
}