javascript - How to make html2canvas and jspdf reponsive for all the screens? - Stack Overflow

admin管理员组

文章数量:1329003

I have created a camera app where I send the pictures to a div and ultimately printing that div.

const handlePrint = async () => {
const grid = document.getElementById("image-grid");

const canvas = await html2canvas(grid);

const imgData = canvas.toDataURL("image/png");

const pdf = new jsPDF({
        orientation: "portrait",
        unit: "pt",
        format: "a4",
      });



 pdf.addImage(imgData, "PNG", 0, 0, 610, 760); //phone chrome


// Add text below the images
const text = "Special One"; // Change this to your desired text
const secondtext = "Second One";
pdf.setFont("Helvetica", "normal");
pdf.setFontSize(18); // Set font size
pdf.text(text, 100, 780);
pdf.text(secondtext, 380, 780);


pdf.save();

};

it works fine with laptop and big screens but for my tab and mobile screens, when I am printing, the image size is smaller with alot of gap from the top and right borders. I tried using scale property of html2canvas but that doesn't help. If I increase the coordinates of addImage by

pdf.addImage(imgData, "PNG", 0, 0, 640, 780);

The borders doesn't go but some parts of the image moves out pdf.

本文标签： javascriptHow to make html2canvas and jspdf reponsive for all the screensStack Overflow