我怎样才能在一个网页打印图像,配合纸张尺寸(A3,A4,A5等)?(How can I print

2019-07-31 12:36发布

我目前使用IE9和媒体查询和我有没有必要有从其他浏览器这方面的工作。

我试图用一组类似的规则:

@page {
    size: auto;
    margin: 10mm 10mm 10mm 10mm;
}

// ...规则相匹配的所有A格式,包括利润和宽容millimiters(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 <9根本不支持任何有意义的方式分页或@页,在我的测试IE9简单地忽略几乎所有的@page规则赞成任何设置配置的用户最后一次。

如果认为IE在全宽和页面的全高打印图像尝试答案从HTML横向打印



Answer 2:

你总是可以这样做:

创建一个只能容纳打印当您想要应用CSS一个新的CSS文件。

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

然后你就可以链接到它在你的HTML文档:

<link rel="stylesheet" href="link/to/print.css" media="print" type="text/css" />

我不是100%“显示:块;”,你可能需要尝试玩弄的“块”其他值。 我没有测试过这一点,但如果你这样做,让我知道,如果它的工作原理!



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:

有没有这样做,据我所知的任何可靠的方法。
我们让用户选择页面大小/方向,并生成包含图像的大小合适的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 */
}


文章来源: How can I print an image in a web page, fitting the paper size (A3, A4, A5, etc)?