分享更有价值
被信任是一种快乐

react打印样式丢失如何解决

文章页正文上

本篇内容介绍了“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 全部代码

“react打印样式丢失如何解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!

相关推荐: Angular中的Change Detection机制怎么实现

这篇文章主要介绍“Angular中的Change Detection机制怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular中的Change Detection机制怎么实现”文章能帮助大家解决问题。在应…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册