vue打印功能_vue实现打印功能的两种方法

vue清除打印机缓存

1、首先，我们要停止Print Spooler 打印服务。 可以通过点击开始菜单打开运行(或者Ctrl+R)，输入sevs.msc，回车键确认。

vue打印功能_vue实现打印功能的两种方法

vue打印功能_vue实现打印功能的两种方法

2、停止 Print Spooler 服务后,我们要找到打印缓存文件并删除。

3、删除打印缓存文件后，重启 Print Spooler 服务,就可以使打印机恢复正常工作。VUE是iOS和Android平台上的一款Vlog社区与编辑工具，允许用户通过简单的作实现Vlog的拍摄、剪辑、细调、和发布，记录与分享生活。

使用window.print()打印指定的一个vue 组件

在想打印一个web页面的时候,会用到window.print()。默认会打印当前document内容,样式/还有里面的html标签.一般我们打印当前页面,不会是整个页面,而只是打印当前页面部分内容而已。一般是写样式,打印之前把不需要打印的标签通过display:none隐藏掉。

如果东西不多也可以这样做,但是如果要打印其他页面,还是得重新写一下这样的隐藏完了还得显示回来,有点麻烦。这时候就想,能不能只打印一个组件这个组件里面的内容都是我们要打印的东西。于是有了封装一个打印组件的想法。

思路是这样的,通过一个iframe 把当前需要打印的组件内容给到iframe的body，样式呢，我们就拿当前document里面的样式。因为vue组件用的也是当前页面的样式,当运行 npm run dev（npm run serve） 的时候, css-loader /style-loader 会把组件的样式打包到document的head标签下页面。

所以就可以这样写 PrintView.vue

组件中的iframe默认不显示的,因为不需要看到它,打印预览有电脑的打印预览.

然后通过props下的html这个属性接收需要打印的组件的html.通过watchhtml的变化,当有变化我们就调用自定义的

setBodyHtml 方法打印,这个方法也很简单,把当前页面的头部样式给到当前组件的iframe,把需要打印的html给

到当前组件的 iframe 通过调用 iframe.window.print(); 打印当前组件。

这样会有一个问题,重新获取到内容的iframe,它自己需要重新加载css跟img,有时候会出现需要打印的组件样式不对或者不显示的问题。所以在打印之前还需要下iframe加载的跟样式是否加载完成.

所以组件完整的写法是这样

通过loadStyle与loadImage这两个方法,别找到iframe中的样式和. 样式会有两种,一种是head的