将模态内容打印为完整的A4页面

Question

我正在尝试两件事:

1. 在模式上显示内容,就像在A4页面上显示的内容一样
2. 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; 高度仍然与第二张图片中显示的一样多.140%在通过Chrome保存的pdf上看起来很好,在firefox中被截止(可以理解)并且在IE中显示为空白pdf.更新的CSS: @media print .page {z-index: 9999;padding: 20mm;margin: 10mm auto;width: 140%;height:100%;position: fixed;top: 15mm;bottom:0;left: 20mm;visibility:visible;}

Answer 1

我想写评论，但我不能，所以它是答案框。tl;dr，您需要提供更多代码或在我们可以看到的地方重现此问题。

我将您的代码放入普通页面中，仅包含一个带有类的 div page，并嵌套了一个带有类的 div subpage，并且存在一些填充问题，并且打印视图看起来与 Web 视图完全不同。

您min-height: 297mm;没有必要，并且正在添加额外的空间，因为它与您的高度设置不符.subpage。

你在打印视图中position:absolute;压扁了你。.subpage

但是通过这两个调整，你的 css（在 html 中只包含简单的 div）就可以正常工作了。我怀疑你页面上的其他东西有冲突的尺寸，但同样，如果没有小提琴或其他东西的复制品，我们看不到它。

PS：我前段时间看到过这个帖子，里面有一个DEMO。看起来很有前途：CSS 设置 A4 纸张大小