打印包含一些预填充数据的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>

​