javascript - 使用一些预填充数据打印一个 Div，然后打印一个隐藏的 div

Question

如果这个问题显得模糊，我提前道歉。我正在将旧的 Silverlight 应用程序移植到 html/web api 应用程序中。

该应用程序允许各种 vendor 申请与主权部落开展业务的许可证，然后允许他们有机会在许可证颁发给他们后打印许可证。

许可证看起来像这样

许可证中几乎 100% 的文本来自数据库。

我的一个想法是创建一个 html 表格并将表格的背景设置为证书图像，然后使用单元格定位来自服务器的文本。

但是由于几个原因我碰壁了，1)许可证需要打印整页并且只打印许可证而不是网站的其余部分，如打印按钮。2) 在许可证打印之前，我需要打印一个隐藏的 div 内的求职信。

因此，理想情况下，用户点击一个按钮，然后打印一封求职信，然后是格式正确的许可证。

非常欢迎任何指点或建议。

谢谢

Answer 1

您可以使用 css @media 仅在打印文档而不是仅在查看时应用样式:

html,
body {
  height: 100%;
  margin: 0;
}

.cover {
  /* hidden cover */
  display: none;
  height: 100%;
  width: 100%;
}
/* fills entire sheet of paper */

.cert {
  display: block;
  height: 100%;
  width: 100%;
}
/* only apply when printing */

@media print {
  /* show cover in print */
  .cover {
    display: block;
  }
  /* hide other elements in print */
  button {
    display: none;
  }
}

<button onclick="window.print()">print</button>
<div class="cover">COVERLETTER</div>
<div class="cert">CERTIFICATE</div>