vue+elementUI 打印pdf文件

后台管理系统里经常需要打印功能，常见的是打印页面对象，但是打印指定的pdf文件就比较麻烦，

这里就实现了，把需要打印的pdf文件放在一个iframe里，然后在子窗口打印

用户操作：点击按钮可以触发打印（如下图）

效果如下

具体代码如下

methods: {
   // 打印
        doPrint() {
            console.log("触发打印");
            let filePath = "/static/JavaScript高级程序设计第四版.pdf";
            this.print(filePath);
        },
        // 打印方法
        print(filePath) {
            console.log("执行打印");
            let iframe = document.createElement("iframe");
            iframe.style.border = "0px";
            iframe.style.position = "absolute";
            iframe.style.width = "0px";
            iframe.style.height = "0px";
            iframe.style.right = "0px";
            iframe.style.top = "0px";
            iframe.setAttribute("src", filePath);
            iframe.onload = () => {
                iframe.contentWindow.print();
                // setTimeout(() => {
                //     document.body.removeChild(iframe);
                // });
            };
            document.body.append(iframe);
}

这样只需要传一个pdf的路径作为参数就可以打印了，当然要是项目需要打印的地方多，也可以直接封装成公共的