打印带有图像的 html（每个图像在单独的页面上）答案

【问题标题】：Print html with images (every image on separate page)打印带有图像的 html（每个图像在单独的页面上）
【发布时间】：2014-06-16 16:15:54
【问题描述】：

我有一个带有图片的 HTML：

<img id="1" .../>
<img id="2" .../>
<img id="3" .../>
<img id="4" .../>

在打印时，我希望每张图片都在单独的页面上（根据打印尺寸）。

现在我把图片从中间剪掉了。

有什么办法可以解决吗？

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/page-break-before
我试过了，还是不行。我有 81 张图片，打印了 78 页（我看到中间被剪掉的页面）。
我试过了：

标签： javascript html asp.net image printing

【解决方案1】：

你可以试试下面的..

<html>
    <head>
        <style type="text/css">
            @media print {
                p.pageBreak {page-break-after: always;}
            }
        </style>
    </head>
    <body>

    <p class="pageBreak">
        <img id="1" src="http://placehold.it/250x250">
    </p>
    <p class="pageBreak">
        <img id="2" src="http://placehold.it/250x250">
    </p>
    <p class="pageBreak">
        <img id="3" src="http://placehold.it/250x250">
    </p>
    <p class="">
        <img id="4" src="http://placehold.it/250x250">
    </p>
    </body>
</html>

【讨论】：