js前端实现批量分页打印二维码标签

目录

代码展示：

1、将勾选的数据以json数组的形式传到后台

2、后端代码（java、C#）

3、最后一步就是拿着后台传过来的图片码取打印喽

---

最近在项目中遇到在前端页面勾选数条数据一键批量打印二维码标签的需求，一开始也是非常的头疼，经过好几天的百度以及思考得出以下方案：

1、将勾选的数据以json数组的形式传到后台，并在当前页面插入隐藏的iframe标签

2、后端循环将单个数据传入打印模板页面，使用Selenium在不打开浏览器的情况下渲染页面，并且在页面中使用html2canvas将要打印的部分（可以用一个div包起来，我这里模板是一个table）转为图片（base64码）

3、将后端穿过来的多个图片码传入动态生成的多个img标签并写入页面隐藏的iframe标签中，之后调用浏览器的打印就OK了。

代码展示：

1、将勾选的数据以json数组的形式传到后台

页面使用的是easyUI, json数据差不多是这样的（你可以根据你的后端程序自己来设置）

[{'code':'111','title1':'998','title2':'芜湖南方','filedname':'名字*状态*手机号','filedval':'zzz*活跃*123456'},
{'code':'222','title1':'1001','title2':'芜湖南方','filedname':'名字*状态*手机号','filedval':'zzz*活跃*123456'},
{'code':'333','title1':'975','title2':'芜湖南方','filedname':'名字*状态*手机号','filedval':'zzz*活跃*123456'}]

在当前页面添加隐藏iframe标签，后面打印就靠这个（src的页面相当于做好样式的空页面）

//添加iframe标签
    var body = document.getElementsByTagName("body");
    var div = document.createElement("div");
    div.innerHTML = '<iframe src="http://10.1.6.243:8976/Common/print.html" id="iframeprint" style="display: none;"></iframe>';
    document.body.appendChild(div);

2、后端代码（java、C#）

需下载chromdriver.exe，地址如下：

http://npm.taobao.org/mirrors/chromedriver/?tdsourcetag=s_pcqq_aiomsg

谷歌浏览器（官网下载）：

https://www.google.cn/chrome/

2.1 java 

以下是我引得各种包（有的可能不需要）解析json用的是阿里的fastjson

<dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>3.2.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-api -->
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-api</artifactId>
            <version>3.2.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-chrome-driver -->
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-chrome-driver</artifactId>
            <version>3.2.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-support -->
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-support</artifactId>
            <version>3.2.0</ve