Question

我正在尝试制作一个print.css，它将页眉分成两页，我无法弄清楚如何在哪里出错

print.css

@media print {
  @page {
    size: 8.5in 11in;
  }

  html {
    box-sizing: border-box;
  }

  body > * {
    display: none;
  }

  body {
    display: inline;
  }

  #preview {
    display: inline;
    font: 12pt Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
  }

  #preview h3 {
    position: relative;
    top: 0px;
    left: 0px;
  }
  #preview button {
    display: none;
  }
}

html（预览充满了javascript）

<body style="background-color: white; height: 100%; width: 100%" onload="buildForm()">
  <aside id="overlay"> <!--overlay display is block-->
    <section onclick="edit()"></section>
    <div id="preview"></div>
  </aside>
</body>

以下是所有内容的jsfiddle，但它不会起作用，因为它是一个电子应用并需要一些节点模块

更新

使用此css

@media print {
  html {
    box-sizing: border-box;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }
  body > * {
    display: none;
  }
  body {
    display: inline;
  }
  #preview {
    font: 12pt Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
  }
  #preview h3 {
    position: relative;
    top: 0px;
    left: 0px;
  }
  #preview button {
    display: none;
  }
}

@page {
  size: A4;
}

Answer 1

从它的外观来看

 @page {
    size: 8.5in 11in;
  }

很可能是罪魁祸首。它仍然在网络世界中观看，而不是打印预览世界。

我的建议是在任何事情之前都要有标准的印刷品 -

.its.visible-mobile{display: none !important;}
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; border:none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a:link:after, a:visited:after { content: ""; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
header .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }

打印分割页面顶部

1 个答案: