Javascript 使用图像打印html（每个图像在单独的页面上）_Javascript_Html_Asp.net_Image_Printing

Javascript 使用图像打印html（每个图像在单独的页面上）

javascript html asp.net image printing

Javascript 使用图像打印html（每个图像在单独的页面上）,javascript,html,asp.net,image,printing,Javascript,Html,Asp.net,Image,Printing,我有一个带有图像的HTML： <img id="1" .../> <img id="2" .../> <img id="3" .../> <img id="4" .../> 打印时，我希望每个图像都根据打印大小放在单独的页面上现在我把中间的图像剪掉了。有没有办法修复它？您可以尝试以下方法 <html> <head> <style type="text/css">

我有一个带有图像的HTML：

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

打印时，我希望每个图像都根据打印大小放在单独的页面上

现在我把中间的图像剪掉了。

有没有办法修复它？

您可以尝试以下方法

<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>

你可以试试下面的方法

<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>

我试过了，但没用。我有81张图片，我有78张打印页面，我看到中间剪下的页面。我试着：@媒体打印{img{页面中断：总是；}}我试过了，但它不起作用。我有81张图片，我有78张打印页，我看到中间剪辑的页面。我尝试：@媒体打印{img{页面中断：永远；}}。