前端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 回调确保克隆文档中的元素完整显示

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

相关推荐

基于Django的StockMing股票预测系统：从ORM建模到ECharts可视化全解析

Puppeteer 请求拦截完全指南：从基础拦截到 Cooperative Intercept Mode 协作式拦截

从JSON数据清洗到数据库导入：背单词词库建设的实战记录

更多资讯

2026年Claude Code插件实战：9款提升效率的必备插件

tiny11builder：让 Windows 11 安装镜像瘦掉近一半的 PowerShell 脚本

GitHub Trending周报：AI编程工具与架构可核验实战

Switch 升到 19.0.1 后 Atmosphere 报 Package1 错误？跟着修好 Fusee 启动

opencode实战指南：终端AI编码Agent安装、配置与高阶玩法

DB-GPT 智能数据分析助手：从一句提问到图表报告一步到位（新手指南）

今日更新

能源系统对接碳交易的路径：从碳核算到碳资产运营

智能硬件数据驱动运营：订单日记与预测性维护实践

逆变器下垂控制与虚拟同步机对比：Simulink仿真建模与参数整定

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？