前端html2canvas结合print-js打印页面，并解决多余空白页问题

一、功能前端html2canvas打印 HTML页面局部打印二、代码结合print-js打印页面importhtml2canvasfromhtml2canvas;importprintJSfromprint-js;/** 打印*/consthandleDownloadasync(){console.log(inputRef.current.scrollWidth,inputRef.current.scrollWidth,inputRef.current.scrollHeight);constcanvasawaithtml2canvas(inputRef.current,{scrollX:0,// 水平滚动位置scrollY:0,// 垂直滚动位置width:inputRef.current.scrollWidth,// 截取的宽度height:inputRef.current.scrollHeight,// 截取的高度useCORS:true,// 启用跨域资源支持allowTaint:true,// 允许污染图像如果需要scale:1,// 缩放比例logging:true,// 开启日志输出以帮助调试backgroundColor: #fff,// 背景颜色如果需要透明背景});constdataURLcanvas.toDataURL(image/png);// 使用 printJS 打印图片printJS({printable:dataURL,type:image,scanStyles:false,base64:true,//方法1style:body{margin:0},//方法2需要调整,按需求修改body{margin:10px}边距style:media print { page {size: auto; margin: 0; } body{margin:10px},targetStyles:[*],});setAssignPersonType(false);};三、容易出现的问题场景打印指定页面元素html2canvas先转成图片再打印发现两页以上就会多出一页空白页边距的原因解决打印图片的时候设置下style属性设置body{margin:0}}或body{margin:10px},按照需求修改margin//方法1style:body{margin:0},//方法2需要调整style:media print { page {size: auto; margin: 0; } body{margin:10px; padding: 0;}},constelementinputRef.current;if(!element){message.error(打印元素不存在);return;}// 获取指定DOM元素的尺寸和位置信息,返回一个DOMRect对象constrectelement.getBoundingClientRect();constoriginalOverflowelement.style.overflow;constoriginalPositionelement.style.position;html2canvaswidth:element.scrollWidth,// 截取的宽度或用rectheight:element.scrollHeight,// 截取的高度或用rect// 确保所有内容都被渲染onclone:(clonedDoc){// 在克隆文档中设置样式以确保完整显示clonedDoc.documentElement.style.overflowvisible;clonedDoc.body.style.overflowvisible;},编译后// 恢复原始样式element.style.overfloworiginalOverflow;element.style.positionoriginalPosition;完整importhtml2canvasfromhtml2canvas;importprintJSfromprint-js;consthandleDownloadasync(){constelementinputRef.current;if(!element){message.error(打印元素不存在);return;}try{// 获取指定DOM元素的尺寸和位置信息,返回一个DOMRect对象constrectelement.getBoundingClientRect();constoriginalOverflowelement.style.overflow;constoriginalPositionelement.style.position;// 临时设置样式以确保完整渲染element.style.overflowvisible;element.style.positionrelative;constcanvasawaithtml2canvas(element,{width:element.scrollWidth,// 截取的宽度或用rectheight:element.scrollHeight,// 截取的高度或用rectscroll:true,// 捕获滚动区域scale:1,// 提高分辨率logging:true,// 开启日志useCORS:true,// 允许跨域图片allowTaint:true,// 允许污染画布backgroundColor:#ffffff,// 背景色// 确保所有内容都被渲染onclone:(clonedDoc){// 在克隆文档中设置样式以确保完整显示clonedDoc.documentElement.style.overflowvisible;clonedDoc.body.style.overflowvisible;},});// 恢复原始样式element.style.overfloworiginalOverflow;element.style.positionoriginalPosition;constdataURLcanvas.toDataURL(image/png);// 使用 printJS 打印图片printJS({printable:dataURL,type:image,scanStyles:false,base64:true,style:media print { page {size: auto; margin: 0; } body{margin:0px; padding: 0;}},targetStyles:[*],});setAssignPersonType(false);}catch(error){console.error(打印失败:,error);message.error(打印失败请重试);setAssignPersonType(false);}};2、handleDownloadasync(){constelementthis.sheetRef.current;if(!element)return;constoriginalOverflowelement.style.overflow;constoriginalPositionelement.style.position;// 临时展开元素使 html2canvas 能捕获全部内容element.style.overflowvisible;element.style.positionrelative;try{constcanvasawaithtml2canvas(element,{width:element.scrollWidth,height:element.scrollHeight,// scroll: true,useCORS:true,allowTaint:true,scale:1,logging:true,backgroundColor:#fff,onclone:(clonedDoc){clonedDoc.documentElement.style.overflowvisible;clonedDoc.body.style.overflowvisible;},});constdataURLcanvas.toDataURL(image/png);printJS({printable:dataURL,type:image,scanStyles:false,base64:true,style:media print { page {size: auto; margin: 0; } body{margin:0px}},targetStyles:[*],});}catch(error){console.error(打印失败:,error);message.error(打印失败请重试);}finally{// 恢复原始样式element.style.overfloworiginalOverflow;element.style.positionoriginalPosition;this.setState({handleDownloadType:false,});}};四、解决打印不全问题使用 scroll: false 避免滚动区域导致的截取问题正确计算元素尺寸优先使用 scrollWidth/scrollHeight通过 onclone 回调确保克隆文档中的元素完整显示