Vue项目实现在线预览pdf,并且可以批量打印pdf

最近遇到一个需求,就是要在页面上呈现pdf内容,并且还能用打印机批量打印pdf,最终效果如下:
在这里插入图片描述
当用户在列表页面,勾选中两条数据后,点击“打印表单”按钮之后,会跳到如下的预览页面:

请添加图片描述
请添加图片描述
预览页面顶部有个吸顶的效果,然后下方就展示出了2个pdf文件对应的内容,我们接着点击“打印”按钮,就会打开新的窗口,并且会出来打印窗口,如下图:
请添加图片描述
这里需要注意的是,我们在打印时需要取消默认的页眉页脚的勾,然后将边距改为无,这样就能保证打印的页面无页眉页脚且是居中显示内容的了,目标打印机选择好,点击"打印"就能打了。现在我们来捋一下整个过程的实现方法及思路:

1.列表页面里,我们点击“打印表单”方法里要先判断用户有没有打钩勾选,有没有勾选中已经上传过打印模版的表单(有templateId就是已经上传过打印模版的表单),都满足后路由跳到预览页FormPreview,代码如下:

猜你喜欢

转载自blog.csdn.net/qq_37635012/article/details/131786034