最近在公司项目中,页面有个打印功能。需要打印所有的图片。
前端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文件!