javascript - How can I print an image in a web page, fitting the paper size (A3, A4, A5, etc)? - Stack Overflow

admin管理员组

文章数量:1334919

I am currently using IE9 and media queries and I have no need to have this working from other browsers.

I tried using a set of rules like:

@page {
    size: auto;
    margin: 10mm 10mm 10mm 10mm;
}

//... rules to match the millimiters of all the A formats (A0, A1, A2, etc) including margins and tolerance

/* A4 210x297 mm */
@media print and (min-height: 266mm) and (max-height: 288mm) and
    (min-width: 179mm) and (max-width: 201mm) {
    .img_port {
        height: 267mm !important;
    }
}

// ...

it seems to be working but it is not reliable because the size height and the width values passed to the CSS seems to depend on the printer even if the A4 format is always selected.

What I want to ask is if there is any other possible way to obtain the same result (fitting the image on one page according to the paper size).

Thank you in advance.

I am currently using IE9 and media queries and I have no need to have this working from other browsers.

I tried using a set of rules like:

@page {
    size: auto;
    margin: 10mm 10mm 10mm 10mm;
}

//... rules to match the millimiters of all the A formats (A0, A1, A2, etc) including margins and tolerance

/* A4 210x297 mm */
@media print and (min-height: 266mm) and (max-height: 288mm) and
    (min-width: 179mm) and (max-width: 201mm) {
    .img_port {
        height: 267mm !important;
    }
}

// ...

it seems to be working but it is not reliable because the size height and the width values passed to the CSS seems to depend on the printer even if the A4 format is always selected.

What I want to ask is if there is any other possible way to obtain the same result (fitting the image on one page according to the paper size).

Thank you in advance.

• javascript
• css
• printing
• media

Share Improve this question Follow asked Sep 11, 2012 at 14:17 ChaSIemChaSIem 49311 gold badge66 silver badges1919 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

The long and short of printing in IE is that you will never be able to accurately control things like this.

Physically, printers have different capabilities when it es to how much of the page is printable area. Then, you also have to deal with any settings that IE remembers from the last page the user printed such as zoom, margins, pages-per-page, etc.

After struggling with this for years, I have finally given up attempting control of what IE does with print pages and started treating my print stylesheets more like suggestions.

IE < 9 simply does not support page-break or @page in any meaningful way and, in my testing IE9 simply ignores almost all @page rules in favor of whatever settings the user last configured.

To suggest that IE print an image at the full width and full height of the page try the answer Landscape printing from HTML

Sounds like this might be a job for page-break:

.img_port {
    height: 267mm !important;  /* might also try height: 100%; */
    page-break-after: always;
    page-break-before: always;
    page-break-inside: avoid;
}

You could always do this:

Create a new CSS file that holds only the CSS you want applied when printing.

*{display: hidden;}
img{display: block; width: 100%; height: 100%;}

Then you can link to it in your html doc:

<link rel="stylesheet" href="link/to/print.css" media="print" type="text/css" />

I'm not 100% on the "display: block;", you may need to try to play around with other values for "block". I have not tested this, but if you do, let me know if it works!

There isn't any reliable way of doing so AFAIK.
We let the user choose the page size/orientation and generate a PDF of the right size containing the image. Actually you can generate a hi-res (bigger) picture to get better printing DPI and fit it to the page.

Have a look at paged.js which enable good formatting for printing:

https://pagedjs/documentation/5-web-design-for-print/

I've found this repo very useful: https://github./electricbookworks/paged-design

If you use pagebreak it will show a empty page.

img{
    page-break-inside: avoid;
    padding:0; margin:0; 
    top:0; left:0; right:0;bottom:0;  border:0;
    /*width:2480px; height:3508px!important;*/ /*a4 size */
    width:100%; height:100%; max-width:100% important!
}
.page-break  { display: block; page-break-before: always; }
@page {
size: landscape;
}
@page :first {
  margin-top: 10cm    /* Top margin on first page 10cm */
}

本文标签：