使用window.print()下载PDF前如何获取文件副本存入变量？

核心结论 #

原生window.print() 不存在可以在下载前返回PDF文件内容的对应事件，无法直接实现类似vue-html2pdf中@hasdownloaded事件的效果。 #

原因说明 #

window.print()是浏览器封装的原生打印触发API，整个PDF生成、打印的流程完全在浏览器内部闭环运行，仅对外暴露了打印生命周期的触发事件，没有开放生成文件的内容读取接口。

原生支持的打印相关事件 #

目前window.print()仅配套两个生命周期事件，均不返回文件内容：

• beforeprint：打印对话框弹出前触发，仅可用于调整页面打印样式，无法捕获PDF数据
• afterprint：打印对话框关闭后触发，仅可用于恢复页面原有样式，同样没有文件数据返回

替代实现方案 #

如果必须要在下载前获取PDF副本存入变量，可选择以下方案实现：

• 改用前端PDF生成类库：比如你提到的vue-html2pdf，或是通用的html2pdf.js、jsPDF等，这类库会自主完成DOM渲染到PDF二进制流的生成流程，你可以先拿到生成好的PDF数据存入变量，再主动触发下载或打印操作
• 如果你必须保留浏览器原生打印的渲染效果，可以先将待打印的DOM内容通过canvas转绘，自行封装为PDF文件拿到数据后，再调用window.print()触发后续流程

内容的提问来源于stack exchange，提问作者Aiswariya