How to set the scale of print preview in html/javascript?

Question

When I print a web page, if the scale was set to 100, the whole page cannot be shown in the preview. If I change the scale to 70 I can see the entire page. I want to know if I can set the scale parameter in HTML/Javascript.

I tried the transform: scale(0.7), however it does not change the <div> size.

Answer 1

You can achieve this using CSS by adding the print media rule and specify the scaling factor as follows:

    @media print {
    body {
        margin-top: 5px;
        margin-left: 10px;
        transform: scale(0.43);
        transform-origin: 0 0;
    }
}

Just in case you want to make the scale factor dynamic then you may need to use a dynamic variable as follows and pass it from js or the html link as follows where "scale-factor is the variable":

@media print {
    body {
        margin-top: 5px;
        margin-left: 10px;
        transform: scale(var(--scale-factor));
        transform-origin: 0 0;
    }
  }