Question

我的应用通过创建一个不可见的iframe然后打印它来生成打印的报告。我正在尝试解决的一系列令人沮丧的问题中的最新信息是针对不同的打印页面大小优化CSS。 IE9 似乎有点工作（但有其他问题，比如忽略@page {margin：...}），但在FF或Chrome上根本没有运气。

我的代码如下所示：

@media print and (width: 210mm) and (height: 297mm) {
   ... stuff for A4 size ...
}

@media print and (width: 8.5in) and (height: 11in) {
   ... stuff for US letter size ...
}

这些规则在Chrome或FF中都没有匹配。我也尝试了设备宽度和设备高度，这些也没有用（它们似乎报告了打印机的绝对最大尺寸，而不是页面尺寸）。我无法弄清楚“宽度”和“高度”返回的值是什么，有没有办法告诉？

是否有可靠的方法使用媒体查询检测打印的页面大小？我非常接近得出的结论是，只有 no 方式可以在浏览器中以任何一致的方式控制打印，并且可以随意使用。

Answer 1

只需尝试此代码，也许可以解决您的问题。

<page size="A4"></page>

Css

@page {
  size: A4;
  margin: 0;
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 12px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 210mm;
  height: 297mm; 
}

@media print {
  body {
    margin: 0;
    box-shadow: 0;
    background: rgb(204,204,204); 
  }
}

使用CSS媒体查询检测打印的页面大小

1 个答案: