Vue项目实现在线预览pdf，并且可以批量打印pdf的两种方法

在线预览pdf，并且可以批量打印pdf的两种方法"/>

Vue项目实现在线预览pdf，并且可以批量打印pdf的两种方法

最近遇到一个需求，就是要在页面上呈现pdf内容，并且还能用打印机批量打印pdf，最终效果如下：

当用户在列表页面，勾选中两条数据后，点击“打印表单”按钮之后，会跳到如下的预览页面：

预览页面顶部有个吸顶的效果，然后下方就展示出了2个pdf文件对应的内容，我们接着点击“打印”按钮，就会打开新的窗口，并且会出来打印窗口，如下图：

这里需要注意的是，我们在打印时需要取消默认的页眉页脚的勾，然后将边距改为无，这样就能保证打印的页面无页眉页脚且是居中显示内容的了，目标打印机选择好，点击"打印"就能打了。实现方式有两种，分别是利用vue-office-pdf插件和iframe标签嵌套pdf，现在我们来捋一下整个过程的实现方法及思路：

方法一：插件vue-office-pdf

1.列表页面里，我们点击“打印表单”方法里