如何在网页中打印图像，以适合纸张尺寸（A3，A4，A5等）？

Question

我目前正在使用IE9和媒体查询，我没有必要在其他浏览器上使用它。

我尝试使用一组规则，如：

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

// ...匹配所有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;
    }
}

// ...

它似乎工作但它不可靠，因为传递给CSS的大小高度和宽度值似乎依赖于打印机，即使总是选择A4格式。

我想问的是，是否有任何其他可能的方法来获得相同的结果（根据纸张尺寸在一页上拟合图像）。

先感谢您。

Answer 1

IE中打印的长短是因为你永远无法准确控制这样的事情。

在物理上，当涉及到多少页面是可打印区域时，打印机具有不同的功能。 然后，您还必须处理IE从用户打印的最后一页记住的任何设置，例如缩放，页边距，每页页面等。

经过这么多年的努力，我终于放弃了尝试控制IE对打印页面的作用，并开始更多地对待我的打印样式表。

IE <9根本不支持分页或@page以及任何有意义的方式，在我的测试中，IE9只是忽略了几乎所有的@page规则，而支持用户上次配置的任何设置。

要建议IE在页面的整个宽度和完整高度打印图像，请尝试从HTML格式打印

Answer 2

你总是可以这样做：

创建一个新的CSS文件，该文件仅包含打印时要应用的CSS。

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

然后你可以在你的HTML文档中链接到它：

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

我不是100％在“display：block;”上，你可能需要尝试使用“block”的其他值。 我没有测试过这个，但如果你这样做，请告诉我它是否有效！

Answer 3

听起来这可能是page-break的工作：

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

Answer 4

AFAIK没有任何可靠的方法。
我们让用户选择页面大小/方向，并生成包含图像的正确大小的PDF。 实际上，您可以生成高分辨率（更大）的图片，以获得更好的打印DPI并使其适合页面。

Answer 5

如果您使用分页，它将显示一个空页面。

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 */
}