h5 页面多张图片打印功能

最近在公司项目中，页面有个打印功能。需要打印所有的图片。

前端window.print()

前端vue代码：

<!-- start --><!-- end --> 是指：要打印的地方

<div class="check-group">
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <template v-for="(city,idx) in cities">
                        <div class="check-wrap">
                            <el-checkbox :label="city" :key="city" v-show="city.show">
                                {{city.name}}
                                <a class="check-group-a" @click="downloadSingleFile(city)">下载</a>
                            </el-checkbox>
                            <div class="annex-img" :id="city.type">
                                <!-- start -->
                                <img :src="imgUrl" v-for="imgUrl in city.imgsrc"
                                     style="height: 48px;width: 39px; margin-left: 33px">
                                <!-- end -->
                            </div>
                        </div>
                    </template>
                </el-checkbox-group>
            </div>

javascript代码：

myPrint: function () {
          //直接调用浏览器打印功能
          bdhtml = window.document.body.innerHTML;
          //定义打印区域起始字符，根据这个截取网页局部内容
          // sprnstr = "<div class=\"annex-img\" id=\"+'1,2'+\">"; //打印区域开始的标记
          // eprnstr = "</div>";   //打印区域结束的标记
          // prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr)+ 23);
          // prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
          let div12 = document.getElementById("1,2");
          let img12 = div12.getElementsByTagName("img");
          img12[0].style.cssText = "height: 500px; width: 400px; margin-left: 33px;";
          img12[1].style.cssText = "height: 500px; width: 400px; margin-left: 33px;";
          let div3 = document.getElementById("3");
          let img3 = div3.getElementsByTagName("img");
          img3[0].style.cssText = "height: 500px; width: 400px; margin-left: 33px;";
          let div4 = document.getElementById("4");
          let img4 = div4.getElementsByTagName("img");
          img4[0].style.cssText = "height: 500px; width: 400px; margin-left: 33px;";
          let div6 = document.getElementById("6");
          let img6 = div6.getElementsByTagName("img");
          img6[0].style.cssText = "height: 500px; width: 400px; margin-left: 33px;";
          if (this.claimDetails.isSpecial!=1){
            let div5 = document.getElementById("5");
            let img5 = div5.getElementsByTagName("img");
            img5[0].style.cssText = "height: 500px; width: 400px; margin-left: 33px;";
            //还原网页打印内容
            window.document.body.innerHTML = (div12.innerHTML + div3.innerHTML + div4.innerHTML + div5.innerHTML + div6.innerHTML);
          }else {
            let div7 = document.getElementById("7");
            let img7 = div7.getElementsByTagName("img");
            img7[0].style.cssText = "height: 500px; width: 400px; margin-left: 33px;";
            //还原网页打印内容
            window.document.body.innerHTML = (div12.innerHTML + div3.innerHTML + div4.innerHTML + div6.innerHTML + div7.innerHTML);
          }
          // console.log((div12.innerHTML + div3.innerHTML + div4.innerHTML + div5.innerHTML + div6.innerHTML + div7.innerHTML));
          // window.document.body.innerHTML = (div12.innerHTML + div3.innerHTML + div4.innerHTML + div5.innerHTML + div6.innerHTML + div7.innerHTML);
          // window.document.body.innerHTML = prnhtml;
          //开始打印
          window.print();

          //还原网页内容
          window.document.body.innerHTML = bdhtml;
          //刷新页面
          location.reload();
        }

 

测试看看功能：

 

点击打印可导出一个pdf文件！