使用插件把HTML布局生成车票进行打印

使用插件把HTML布局生成车票进行打印

我要给大家讲的插件是html2canvas
Html2canvas是能够把html布局生成图片的插件
能够通过书写几句代码就能将布局生成图片了
而我们要使用插件把html布局生成图片然后再调用打印代码进行打印
完成的步骤如下
首先我们得布局出我们想要生成的图片的样子
我要生成的图片是车票
如下图是车票的布局图

上面的只是车票的字段基本布局还没有对应的车票数据
我要实现的效果是根据我选中的一条具体车票数据给车票的布局进行文本回填来完成最终的车票
如下两图就是无数据和有数据的效果图对比


而我的车票数据又是使用layui表格进行绑定的
所以我是通过添加layui表格的行点击事件来获取到具体的某一条进行车票数据回填的
如下图就是我添加行点击事件完成数据回填的代码

行点击事件选中哪一行就回填哪一条数据
如下图选中的是名为小龙的购票人的车票数据

所以回填的就是小龙的数据如下图

布局好需要生成图片的车票样子我们就来运用html2canvas插件执行生成图片
生成图片后返回一个图片链接，然后打开一个新窗体通过document.writer()
的方法直接将图片写入新窗体中
最后给新窗体直接调用打印的方法就可以进行窗体内容的打印了也就是车票图片的打印
如下图就是完成生成图片和打印的代码图

效果图完成步骤如下
打开新窗体，弹出打印页面点击打印

弹出生成PDF文档保存的提示框选择路径进行保存就完成打印了车票就成功生成和打印了