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＆lt; 9只是不支持分页或@page以及任何有意义的方式，在我的测试中，IE9只是忽略了几乎所有的@page规则，而不管用户上次配置的任何设置。

建议IE在页面的全宽和全高处打印图像，尝试答案Landscape printing from HTML

Answer 2

您可以随时执行此操作：

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

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

然后你可以在你的html doc中链接到它：

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

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

5 个答案: