将布局生成图片进行打印

将布局生成图片进行打印

首先我要讲的是将你想要的页面布局生成图片然后进行打印
将页面布局生成图片就要运用到一个插件html2canvas
如下图就是将页面布局生成图片进行打印的代码

生成图片的执行代码完全是由插件html2canvas的方法html2canvas（）完成的
这个方法已经封装好了生成图片的代码
你只需在这个方法的第一个参数填入页面布局最外层标签的ID即可
它就会给你根据布局自动生成了一张数据图片
然后就是方法的第二个参数了
第二个参数填的是方法的配置项onrendered
这个配置项后面接的是方法也就是我们俗称的回调函数
回调函数返回的是生成的图片数据
你可以在回调函数里对返回的图片数据进行你想要的处理
类如上图根据返回的图片数据获取到图片链接拼接进去img标签里进行图片的显示
图片已经生成好了但由于打印是根据window也就是整个页面进行打印
所以我们要重新打开一个窗体将图片写入新窗体中然后再调用打印
还有打印我用了一次性计时器setTimeout将打印方法延时执行了
这样做的原因是将图片写入新窗体的代码执行速度比弹出打印窗体的速度慢
又由于打印的内容是从窗体中获取的
如果没有将图片完整写入窗体那么打印获取到的内容将是空白的
如下图

从图中可以看出来打印的内容是一片空白的
那么加一个计时器延时弹出打印框必要的
延时直到将图片写入窗体显示出来后再执行打印就不会打印出错了
如下图是延时打印后的效果图