当前位置: 首页 > Web前端 > HTML5

局部打印

时间:2023-04-04 22:52:28 HTML5

前端实现局部打印就是通过打印机打印部分页面信息,主要依赖三方工具html2canvas和window.print的原生apihtml2canvas:这个工具的主要作用是将dom传递给获取domwindow.print的截图:调用Preparetheprinter打印页面npminstall--savehtml2canvas具体使用.vue部分

需要打印的部分

需要打印的部分

需要打印的部分

不打印的部分

不会打印的部分

不会打印的部分

需要打印的部分printed

需要打印的部分

需要打印的部分

.jspartprint(){constdomList=[...document.querySelectorAll(".print")];//需要打印的部分会被赋予类名constimgList=[];常量计数=0;constfn=()=>{/***打开一个新页面并在上面附加图片,然后调用新页面的打印*/constprintWindow=window.open();imgList.forEach(img=>{printWindow.document.body.append(img);});打印窗口.打印();};domList.forEach(dom=>{//html2canvas不支持list,所以遍历html2canvas(dom).then(canvas=>{/***html2canvas接受dom并生成canvas,把canvas转为Images方便打印*/constbase64=canvas.toDataURL();constimg=newImage();img.onload=function(){/***因为会打印多个部分,所以会生成多张图片所以才有了这个操作*/imgList[i]=this;count++;if(count>=domList.length){fn();}};img.src=base64;});});},重点解释为什么要这样做?如果直接在该页面调用打印方法,则会打印整页。如果要实现局部打印,需要隐藏不需要的部分,比较麻烦。这样做的好处是你不需要繁琐的配置。将生成的图片丢到新打开的页面中。新打开的页面只有需要打印的部分。此时调用新打开页面的打印方法,完善最终的打印效果。不管怎样,产品被接受了哈哈