我尝试打印一个仅包含两个图像的简单 html 页面。每张图片都需要填满一整页。我的测试图像具有 600 dpi 的 A4 页面的精确大小。
此 html 页面是从隐藏的 iframe 打印的。在 Firefox 上效果很好，这意味着我在每个页面上都有每个图像。 我的问题出在 chrome 上……第二张图片的一部分出于某种原因出现在第三页上……:(
<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
提前致谢!
最佳答案
如果您将图像及其容器显示为 block 元素，并移除它们周围的所有填充和边距，它应该会阻止任何内容跳到下一页。
例如
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 修改了这些更改:
关于javascript - 在两个整页上打印两个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37167117/