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

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

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

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


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

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