Question

我正在尝试两件事：

在模式上显示内容，就像它在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 =＆＃34; page＆＃34;）以覆盖A4页面宽度。不要认为它是最好的解决方案，也不能让高度伸展整个297毫米;高度仍然与第二张图片中显示的一样多。 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，您需要提供更多代码或在我们可以看到它的地方重现此问题。

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

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

您的position:absolute;在打印视图中挤压了.subpage。

但是通过这两个调整，你的css，只有html中的简单div，工作得很好。我怀疑你网页上的其他内容有相互矛盾的尺寸，但同样，如果没有小提琴或其他东西的再现，我们就无法看到它。

PS：我从前段时间看过这篇文章，那里有一个DEMO。看起来很有希望：CSS to set A4 paper size

Answer 2

请试试这个

DAG

Answer 3

我更新了一个jsfiddle示例以满足您的需求

这是css代码

    render() {
        if (this.props.isLoading) {
            return null; // or show loading icon
        }

        return (
            // stuff
        );
    }


export default createContainer((props) => {
    const   id = props.params.id;
    let subscription = Meteor.subscribe('anything', id);
    let data = ExampleCollection.find({ parent: id }).fetch();
    let isLoading = !subscription.ready();

    return {data, isLoading};
}, Example);

这是html：

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

和一个调用print的javascript代码：

<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>

http://jsfiddle.net/95ezN/1459/

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

3 个答案: