JavaScript How to send a div to the Windows Print Dialog at the correct scale for A1/A4 etc.

[Messy]

I have a div that displays user-edited content ready to be sent to the Windows Print Dialog for printing. The content contains images and text at a width of 7016px, which is the width of A1 at 300dpi. I have a button to print at A1 and a button to print at A4. The A4 button changes the width to 2480px to fit onto A4 paper. But when the dialog opens, the image is huge and takes up about 7 pages of A4 paper. In order for the image to fit I need to manually change the scale to 10.

How can I send the div to the print dialog at the correct scale to fit onto the paper? Is there a way to do this?

Thank you 🙂

Here is my print function:

function printContent(size) {
    const printContainer = document.getElementById("allContent");

    if (!printContainer) {
        console.error("Print container not found!");
        return;
    }

    // Store the original page content
    const originalContent = document.body.innerHTML;

    // Set the correct width for A1 or A4 printing
    if (size === "A1") {
        printContainer.style.width = "7016px";  // A1 width at 300 DPI
        printContainer.style.height = "auto";   // Flexible for roll printing
    } else if (size === "A4") {
        printContainer.style.width = "2480px";
        printContainer.style.height = "3508px";
    }

    // Replace the body content with only the allContent div for printing
    document.body.innerHTML = printContainer.outerHTML;

    // Trigger the print dialog
    window.print();

    // Restore the original content after printing
    document.body.innerHTML = originalContent;
    location.reload(); // Reload to restore event listeners and styles
}

 

[Messy]

UPDATE: I think I have found the source of the issue. Even though the container div is being resized for print, all of the child divs, which contain the actual content, are still at their original size. This is what I need to address.

 

[ratwolf]

UPDATE: I think I have found the source of the issue. Even though the container div is being resized for print, all of the child divs, which contain the actual content, are still at their original size. This is what I need to address.

Amazing: Sometimes, just the act of putting a problem into words can open the door to new insights. When we try to explain an issue, we’re forced to organize our thoughts, which often reveals gaps we hadn’t noticed before. It’s amazing how taking a step back and simply writing it down can suddenly make the solution click into place

Good luck!

 

[Messy]

I have it all sorted now, thanks. Instead of using transform: scale to scale down the div to print I am using zoom with a percentage on it. This is basically the same as manually setting the scale in the print dialog, but it saves me that step. I still don't really understand why the div needs to be scaled down. Even for printing at A1 the scale needs to be 29%, even though the content is exactly the size of A1 so it should fit perfectly. I don't know why that is, but it works and the dpi remains at 300, so I'll just accept it.

If anyone does understand the reason for the need to scale the div down to fit onto A1 paper even though the width of the content is exactly 7016px (the width of A1 at 300dpi in portrait) then please update this thread with the answer! Thanks! 🙂