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