I have the following code the issue the implementation is like the following generated items go in to a div that has a fixed width of 1100, using mui btw, when creating the pdf on desktop the results are as they should be how ever when creating the pdf from mobile phone the width of the created pdf is small I could say only 400 of the 1100 div is showing, when creating from chrome responsive it is working as it should, how to what is the right options to make jspdf created a pdf with the right width I think jsPdf is confusing iphone screen size ?
html2canvas(
document.getElementById('pdfItems')!,
{
onclone: function (clonedDoc) {
// none ! hidden show !!
clonedDoc.getElementById('pdfItems')!.style.display = 'flex';
},
// TO INCREASE QUALITY !!!!!!!!!!
scale: /*3*/ 2,
//width: document.getElementById('pdfItems')!.clientWidth,
}
/* {
allowTaint: false,
width: window.innerWidth,
height: window.innerHeight,
scrollX: window.pageXOffset,
scrollY: window.pageYOffset,
x: window.pageXOffset,
y: window.pageYOffset,
imageTimeout: 1500,
}*/
).then((canvas) => {
//document.body.appendChild(canvas); // if you want see your screenshot in body.
const imgData = canvas.toDataURL('image/png');
//A4
var imgWidth = 210;
//var pageHeight = 295;
var imgHeight = (canvas.height * imgWidth) / canvas.width;
//var heightLeft = imgHeight;
// A4
var doc = new jsPDF('p', 'mm' /*pt*/, 'a4', true);
doc.addPage([imgWidth, imgHeight]);
doc.addImage(imgData, 'PNG', 0,0 , imgWidth, imgHeight);
doc.deletePage(1);
const fileName = 'test'
doc.save(`${fileName}.pdf`);
});
};
// PDF DIV STYLE
<div
id='pdfItems'
style={{
display: 'flex',
flexDirection: 'column',
margin: 0,
padding: 0,
textAlign: 'center',
width: 1100,
}}
>
// Itemes
</div>