将模态内容打印为完整的A4页面 [英] Print modal content as full A4 page

问题描述

我尝试两件事：

1. 在模态上显示内容如何在A4页面上显示


2. windows.print（）通过主要浏览器在A4页面上的模态

p>

  .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; 
} 
} 
  

以下是模式的外观：
< a href =https://i.stack.imgur.com/ZR3RP.png>

但这是它在调用 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; 15mm; bottom：0; left：20mm; visibility：visible;}

解决方案

写评论，但我不能，所以答案盒是。 tl; dr，你需要提供更多的代码或者在一个我们可以看到它的地方重现这个问题。

我把你的代码放入简单的页面，类页面并嵌套一个类与 subpage 的div，并且有一些填充问题，打印视图看起来没有像网络

您的 min-height：297mm; 不是必需的，并且添加了额外的空间， / code>在打印视图中压缩您的 .subpage 。

但是有了这两个调整， ，只是简单的div在html，工作关于罚款。我怀疑您网页上的其他内容具有相冲突的尺寸，但是再次，没有小提琴或其他东西的复制品，我们看不到它。

PS：我看到了这个其他帖子从一些时间前面，有一个DEMO在那里。看起来很有前景： CSS设置A4纸张尺寸

I am trying two things :

1. Show content on a modal as how it would appear on an A4 page
2. windows.print() the modal on an A4 page through major browsers

Following is my 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;
    }
}

Here's how the modal looks:

But this is how it looks on calling window.print() on button click:

What am I doing wrong here? Relative CSS newbie, have looked at a bunch of SO questions and other resources, but can't seem to figure this out.

UPDATE: I used z-index:9999 and width:140% to get the modal content(i.e. class="page") to cover the A4 page width. Don't think its the best solution, also can't get height to stretch the entire 297mm; height still as much as shown in second image. The 140% looks fine on a pdf saved through Chrome, is cutoff (understandably) in firefox and shows up as blank pdf in IE. Updated 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;}

解决方案

I'd write a comment but I can't, so answer box it is. tl;dr, you need to provide more code or reproduce this issue in a place where we can see it.

I put your code into plain page with just a div with class page and nested a div with class subpage and there are some padding issues and the print view looks nothing like the web view.

Your min-height: 297mm; wasn't necessary and was adding extra space as it doesn't align with your height setting for .subpage.

Your position:absolute; squished your .subpage in print view.

But with those two tweaks, your css, with just simple divs in html, works about fine. I suspect something else on your page has conflicting dimensions, but again, without a reproduction on fiddle or something, we can't see it.

PS: I saw this other post from some time ago and there's a DEMO in there. It looks promising: CSS to set A4 paper size

这篇关于将模态内容打印为完整的A4页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！