how to change viewPort width of big screens to 1280px in react

[rishavcode89]

I am currently utilizing HTML2Canvas and jsPDF to export a PDF document. When the browser viewport width is 1280 pixels, the resulting PDF displays the UI as intended. However, I have encountered an issue where the UI becomes distorted when viewPort is greater than 1280px. I would appreciate any assistance in resolving this matter to ensure the PDF maintains its intended appearance across all screen sizes.

here's my code

const pdfExport = async (sections: any[]) => { dispatch(setIsexporting(true)); let doc = new jsPDF("p", "mm"); let metaTag = document.getElementById('viewport'); metaTag?.setAttribute("content", "width=1280");

const pageHeight = 292; // Height of the page

for (let index = 0; index < sections.length; index++) { const section = sections[index]; const divToPrint = section.current; // Check if the section's height is greater than 10 pixels if (divToPrint.clientHeight > 20) { await html2canvas(divToPrint).then((canvas) => { let imgData = canvas.toDataURL("image/jpeg", 1); let imgWidth = 206; // Reduced width to accommodate padding

  let imgHeight = (canvas.height * imgWidth) / canvas.width;
  let positionX = 2; // Padding from left side
  let positionY = 2; // Padding from top

  // Add a new page if it's not the first section
  if (index > 0) {
    doc.addPage();
  }

  // Adding page image
  doc.addImage(
    imgData,
    "PNG",
    positionX,
    positionY,
    imgWidth,
    imgHeight
  );

  // Calculate remaining space after adding the image
  let remainingSpace = pageHeight - (positionY + imgHeight) + 4;

  // If there is remaining space, fill it with a background color
  if (remainingSpace > 0) {
    doc.setFillColor(
      247,
      248,
      250
    );
    doc.rect(
      positionX,
      positionY + imgHeight,
      imgWidth,
      remainingSpace,
      "F"
    );
  }

  // gray border with padding
  doc.setDrawColor(247, 248, 250);
  doc.setLineWidth(5);
  doc.rect(0, 0, 210, 298);

  if (index === sections.length - 1) {
    doc.save("exhibitors_statistics.pdf");
    let metaTag = document.getElementById('viewport');
      metaTag?.setAttribute(
        "content",
        "width=device-width, initial-scale=1"
      );
  }
});

} } dispatch(setIsexporting(false)); };

for small devices its changes the viewport to 1280 but on big screen i dont know why but its not working..