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

Question

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

该应用程序允许各个供应商向主权部落申请许可证，然后允许他们有机会在发出许可证后打印许可证。

许可证看起来像这样

许可证中几乎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>