生成图片打印

作者:孙英鹏。     撰写时间:2019-3-29

生成图片打印

今天给大家讲一个关于打印的功能,相信大家对这个功能并不陌生,但是今天我讲的并不是打印,而是生成图片打印,顾名思义就是变成图片后打印。PS(我讲的代码是借鉴老师的代码,并非原创)

第一步:先用p标签把你先要打印的内容写在页面内。

代码图:
在这里插入图片描述

效果图:
在这里插入图片描述

第二步:点击表格获取数据,将数据回填到图片里的空白处。

代码图:
在这里插入图片描述
在这里插入图片描述

首先到点击表格双击事件里面填写AA,为的是获取表格的内容,然后在写数据绑定代码,把上面的ID获取到,然后再把text标签的ID进行回填

效果图:
在这里插入图片描述

第三步:大家可能看到了图片头部的日期,它是一进入页面就有了,我这个日期是因为预约打印所以是往后了三个月,如何获取请看图片。

代码图:
在这里插入图片描述

把上面的Logintime获取到,然后填写获取当前时间的代码,写完之后要进行判断,不判断的话日期到了10月会递增变成13而不是1月,之前就没写然后出错,要非常的注意。

扫描二维码关注公众号,回复: 6170028 查看本文章

第四步:生成图片打印

代码图:
在这里插入图片描述

引入html2canvas插件,填写对应的ID,进行生成图片,生成完之后,填写window打印
窗体,填写打印代码,就进行打印。

效果:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44547418/article/details/88897536