react打印样式丢失如何解决

npminstall--savehtml2canvas

npminstalljspdf--save

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);
})
}