前端实现PDF预览打印

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();