How to set the scale of print preview in htmljavascript? - Stack Overflow

admin管理员组

文章数量:1332726

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.

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.

• javascript
• html
• css

Share Follow edited Aug 30, 2017 at 6:59 Jan_V 4,41622 gold badges4242 silver badges7272 bronze badges asked Aug 30, 2017 at 6:18 VincentVincent 9311 gold badge22 silver badges99 bronze badges 2

• Probably you need print specifications for css. Herw is an article. smashingmagazine./2011/11/how-to-set-up-a-print-style-sheet – Mehmet S. Commented Aug 30, 2017 at 6:22
• When using @page, only margin is implemented yet. Other properties are documented bt not implemented. When using a responsive layout, the print layout will show the correct respnsive layout automatically. – bron Commented Jul 27, 2023 at 14:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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;
    }
  }

There is no API for Chrome PDF Viewer or Print Preview. You're pretty much stuck with what you get.

You can sometimes pull off some tricks by directly altering the PDF code itself. I am working on a project now where I build the pdf myself using pdfkit. I was able to set some flags that Chrome honors, so I get Auto Print (in that it automatically opens the Print Preview when opening the document) and disabled Auto-Fit (so it won't try to resize to different paper size). But those had to be embedded inside the pdf, not styled on afterward.

If you decide to go that route, I posted recipes in the Issues forum for how I got pdfkit to set those flags.

Edit: Sorry I just re-read your question, and realized you didnt't mention PDFs. I made that jump myself because PDFs with flags are basically the only way you can gain any access to the controls of Print Preview which I believe is an extension of PDF Viewer. So if it is possible to change the scale it will be by turning your page into a PDF and setting some sort a flag (I would search for something like "default view scale") that hopefully Chrome doesn't ignore in the preview.

本文标签： How to set the scale of print preview in htmljavascriptStack Overflow