Javascript 将模式内容打印为完整的A4页

我正在尝试两件事：

在模式上显示内容，就像在A4页面上显示内容一样

windows.print（）通过主要浏览器在A4页面上显示模式

以下是我的CSS：

.page {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px black solid;
    height: 257mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}

@media print {
    html, body {
        margin:0 !important;
        padding:0 !important;
        height:100% !important;
        visibility: hidden;
    }
        
    .page .subpage .col-md-12,.col-lg-12{
        float:left;
        width:100%;
    }
    .page .subpage {
        padding: 1cm;
        border: 5px black solid;
        height: 257mm;
        outline: 2cm #FFEAEA solid;
        position:absolute;
    }
    .page {
        visibility: visible;
    }
}

以下是模态的外观：

但这是在单击按钮时调用

window.print（）

时的外观：

我做错了什么？相对的CSS新手，已经看了一堆SO问题和其他资源，但似乎无法解决这个问题

更新：我使用z-index:9999和width:140%获得模式内容（即class=“page”）以覆盖A4页面宽度。不要认为它是最好的解决方案，也不能得到高度来拉伸整个297mm；高度仍然与第二幅图中显示的高度相同。在Chrome上保存的pdf上，140%看起来很好，在firefox中被截断（可以理解），在IE中显示为空白pdf。更新的CSS：

---

@media print.page{z-index:9999；padding:20mm；margin:10mm自动；宽度：140%；高度：100%；位置：固定；顶部：15mm；底部：0；左侧：20mm；可见性：可见；}

我想写评论，但我不能，所以答案框就是。tl；博士，你需要提供更多的代码，或者在我们可以看到的地方重现这个问题

我将代码放入普通页面，其中只有一个div，class

page

，并将一个div嵌套在class

subpage

中，存在一些填充问题，打印视图与web视图完全不同

您的

最小高度：297mm不是必需的，并且正在添加额外的空间，因为它与
子页面的高度设置不一致

您的
位置：绝对位置
在打印视图中挤压
.subpage

但是有了这两个调整，你的css，仅仅是html中的简单div，就可以正常工作了。我怀疑你页面上的其他内容有冲突的维度，但同样，如果没有小提琴上的复制品或其他东西，我们无法看到它

PS：我很久以前看过另一篇文章，里面有一个演示。看起来很有希望：
请试试这个

@media print{
  body * {
    visibility: hidden;
  }
  #page, #page * {
    visibility: visible;
  }
  #page {
    position: absolute;
    top: 0;
    left: 0;
  }
}

我已经更新了一个JSFIDLE示例以满足您的需要

下面是css代码

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: yellow;
  }
}

以下是html：

<div>
  <button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>

<hr />
<div id="printSection">
  <div id="printThis">
    This should BE printed!
  </div>

  <div id="printThisToo">
    This should BE printed, too!
  </div>

</div>


当您要打印时，css类中的样式将无效。所以你必须使用内联样式进行打印。谢谢阿米努尔，我不知道。我做了更改，但仍然无法进行全幅打印。添加图片让问题更清楚你能试试吗？告诉我这是否有帮助？@AminurRashid“css类中的样式将没有效果。”这一点都不正确。转到此页面，打开浏览器的打印对话框，告诉我CSS类是否有任何影响：@AminurRashid yes。还是不对。
document.getElementById("btnPrint").onclick = function() {
  window.print();
}