预览打印前的页面格式

Question

我正在尝试编码一个类似于格式的页面，在要求预览页面之前显示一个背景，表明背景的颜色将不包括在预览中。谢谢

        <script>
        function printContent() {
          var page = document.getElementById("page");
          var btn = document.getElementById("grey");

          btn.style.visibility = 'hidden';
          page.style.borderStyle = 'none';
          page.style.margin = 'auto';

          window.print();
          btn.style.visibility = 'hidden';
        }
        </script>
        <div id="source-button" class="btn btn-primary btn-xs" style="display: none;">&lt; &gt;</div></div><!-- /example -->

Answer 1

你可以使用CSS @media print功能。不使用JS，而使用CSS。

<style type="text/css">
    @media print{
            .btn{display:none}
            .page{margin:auto}
}
</style>

Answer 2

为此，我建议使用print stylesheet，那么它也会影响使用浏览器操作(例如CMD-P)的用户

@media print {
  .btn {
    display: none;
  }
}