Question

我尝试打印一个只包含两个图像的简单html页面。每张图片都需要填满整页。我的测试图像具有A4页600 dpi的精确尺寸。

此html页面是从隐藏的iframe打印的。在Firefox上它运行良好，这意味着我在每个页面上都有每个图像。我的问题是关于铬......第二张图片的一部分出现在第三页上，原因是...... :(

<html>
<head><title>DoubleA4</title></head>
<body>
  <div style="position: absolute;  left: 0;  top: 0;  bottom: 0;  right: 0;">
  <img style="width: 100%; height: 100%;" src="http://img15.hostingpics.net/pics/369262front.png">
  <img style="width: 100%; height: 100%;" src="http://img15.hostingpics.net/pics/143216back.png">
  </div>
</body>
</html>

我认为这是一个CSS问题，但我找不到比这更好的渲染方法。

重现问题的演示：JSFiddle

提前致谢！

Answer 1

如果您将图片及其容器显示为block元素，并删除它们周围的所有填充和边距，则应该阻止任何碰到下一页的内容。

e.g。

var pages = '<html><head><title>DoubleA4</title></head><body>';
pages += '<div style="position: absolute;  left: 0;  top: 0;  bottom: 0;  right: 0; margin: 0; padding: 0; display: block;">';
pages += '<img style="width: 100%; height: 100%; margin: 0; padding: 0; display: block;" src="http://img15.hostingpics.net/pics/369262front.png">';
pages += '<img style="width: 100%; height: 100%; margin: 0; padding: 0; display: block;" src="http://img15.hostingpics.net/pics/143216back.png">';
pages += '</div></body></html>';

您的JSFiddle已使用这些更改进行了修改：

https://jsfiddle.net/0a83ymzz/6/

在两整页上打印两张图像

1 个答案: