Javascript 如何在网页中打印适合纸张尺寸（A3、A4、A5 等）的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12371822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I print an image in a web page, fitting the paper size (A3, A4, A5, etc)?
提问by ChaSIem
I am currently using IE9 and media queries and I have no need to have this working from other browsers.
我目前正在使用 IE9 和媒体查询，我不需要在其他浏览器中使用它。
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
//... 匹配所有 A 格式（A0、A1、A2 等）的毫米数的规则，包括边距和容差
/* 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.
它似乎正在工作，但它并不可靠，因为即使始终选择 A4 格式，传递给 CSS 的大小高度和宽度值似乎也取决于打印机。
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.
先感谢您。
采纳答案by Reid Johnson
The long and short of printing in IE is that you will never be able to accurately control things like this.
IE中打印的长处和短处是你永远无法准确控制这样的事情。
Physically, printers have different capabilities when it comes 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.
在物理上，当涉及到多少页面是可打印区域时，打印机具有不同的功能。然后，您还必须处理 IE 从用户打印的最后一页中记住的任何设置，例如缩放、边距、每页页数等。
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 对打印页面所做的操作的尝试，并开始将我的打印样式表视为建议。
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.
IE < 9 根本不支持任何有意义的分页符或@page，在我的测试中，IE9 只是忽略了几乎所有的@page 规则，而支持用户上次配置的任何设置。
To suggest that IE print an image at the full width and full height of the page try the answer Landscape printing from HTML
要建议 IE 以页面的全宽和全高打印图像，请尝试回答从 HTML 横向打印
回答by Derek Bourgeois
You could always do this:
你总是可以这样做：
Create a new CSS file that holds only the CSS you want applied when printing.
创建一个新的 CSS 文件，该文件仅包含您要在打印时应用的 CSS。
*{display: hidden;}
img{display: block; width: 100%; height: 100%;}
Then you can link to it in your html doc:
然后你可以在你的 html 文档中链接到它：
<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!
我不是 100% 的“显示：块；”，您可能需要尝试使用“块”的其他值。我没有测试过这个，但如果你这样做了，请告诉我它是否有效！
回答by Peter Ivan
There isn't any reliableway 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.
AFAIK没有任何可靠的方法可以这样做。
我们让用户选择页面大小/方向并生成包含图像的正确大小的 PDF。实际上，您可以生成高分辨率（更大）图片以获得更好的打印 DPI 并使其适合页面。
回答by Sean Vieira
Sounds like this might be a job for page-break:
听起来这可能是一份工作page-break：
.img_port {
height: 267mm !important; /* might also try height: 100%; */
page-break-after: always;
page-break-before: always;
page-break-inside: avoid;
}
回答by Web Designer cum Promoter
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 */
}
