文章页正文上
本篇内容介绍了“react打印样式丢失如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! react打印样式丢失的解决办法:1、通过“npm install –save html2canvas npm install jspdf –save”命令安装jspdf;2、使用jspdf将需要打印的div转成pdf;3、使用react重新打印即可。vue print打印div样式丢失 (react通用)使用网上的print.js插件,打印发现样式丢失。解决方案 > 将html转成pdf,再打印pdf使用jspdf将需要打印的div转成pdf(转成的pdf样式不会丢失,因为pdf.js是将div转成canvas)安装jspdf
npminstall--savehtml2canvas
npminstalljspdf--save
上代码utli.js 直接复制,注意outPutPdf方法入参即可
importhtml2canvasfrom'html2canvas'; importjsPDFfrom'jspdf'; //base64转blob exportfunctiontoBlob(base64Data){ letbyteString=base64Data if(base64Data.split(',')[0].indexOf('base64')>=0){ byteString=atob(base64Data.split(',')[1]);//base64解码 }else{ byteString=unescape(base64Data.split(',')[1]); } //获取文件类型 constmimeString=base64Data.split(';')[0].split(":")[1];//mime类型 //ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区 //letarrayBuffer=newArrayBuffer(byteString.length)//创建缓冲数组 //letuintArr=newUint8Array(arrayBuffer)//创建视图 constuintArr=newUint8Array(byteString.length);//创建视图 for(leti=0;iwinI){ abs=(winO-winI)/2;//获得滚动条宽度的一半 } canvas.width=w*2;//将画布宽&&高放大两倍 canvas.height=h*2; constcontext=canvas.getContext('2d'); context.scale(2,2); context.translate(-offsetLeft-abs,-offsetTop); //这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此translate的时候,要把这个差值去掉 html2canvas(element,{ useCORS:true,//允许加载跨域的图片 allowTaint:true, scale:2//提升画面质量,但是会增加文件大小 }).then(cs=>{ constcontentWidth=cs.width; constcontentHeight=cs.height; //一页pdf显示html页面生成的canvas高度 constpageHeight=contentWidth/592.28*841.89; //未生成pdf的html页面高度 letleftHeight=contentHeight; //页面偏移 letposition=0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 constimgWidth=595.28; constimgHeight=592.28/contentWidth*contentHeight; constpageDate=cs.toDataURL('image/jpeg',1.0); constpdf=newjsPDF('','pt','a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面的高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if(leftHeight0){ pdf.addImage(pageDate,'JPEG',0,position,imgWidth,imgHeight) leftHeight-=pageHeight; position-=841.89; //避免添加空白页 if(leftHeight>0){ pdf.addPage() } } } if(isDownload){ pdf.save(`${pdfName}.pdf`); } if(isPrint){ constlink=window.URL.createObjectURL(toBlob(pdf.output('datauristring'))); constmyWindow=window.open(link); myWindow.print(); } callback&&callback(pdf); }) }
需要打印部分
vue 全部代码
取消入库单 打印报表入库单{{viewInfo.accessNumber}} {{viewInfo.supplier}} {{viewInfo.accessDate&&$moment(viewInfo.accessDate).format('YYYY-MM-DDHH:mm:ss')}} {{viewInfo.warehouse}} {{viewInfo.source}} {{viewInfo.handledBy}} {{viewInfo.purchaseOrderNo}} {{viewInfo.invoiceNo}} {{viewInfo.contractNo}} {{viewInfo.accessType}} {{viewInfo.addTime}} {{viewInfo.content}}
“react打印样式丢失如何解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!
相关推荐: Angular中的Change Detection机制怎么实现
这篇文章主要介绍“Angular中的Change Detection机制怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular中的Change Detection机制怎么实现”文章能帮助大家解决问题。在应…
文章页内容下