HTML/CSS - 打印时忽略共享布局

Question

我目前正在构建一个页面，其中只需要打印特定部分（我可以通过打印 CSS 来完成）。我遇到的问题是我需要使用共享布局。尽管我已经能够禁用打印预览上显示的内容，但此布局仍然会影响打印。澄清一下，我想要打印的是唯一打印的内容，但由于共享布局，它被缩小到原始大小的 70% 左右。我知道共享布局导致了此问题，因为如果我在渲染页面时删除共享布局，它会正确打印。

有没有办法更新打印 CSS 以忽略共享布局？

我的“@media Print”如下：

@media print {
    @page {
        size: letter portrait !important;
        margin: 0 !important;
    }

    header,
    footer {
        display: none;
    }

    body {
        visibility: hidden;
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
    }

    #do-not-print {
        display: none;
        visibility: hidden;
    }

    #section-to-print {
        visibility: visible;
        position: absolute;
        margin: 0;
        top: 0 !important;
        left: .25in;
        width: 8in !important;
        min-height: 10in !important;
    }

感谢您提供的任何帮助。

Answer 1

不幸的是，我无法用这个帐户发表评论，所以这个答案只会有部分帮助。我更愿意发表评论，要求您实际上传整个项目或至少是其中的一个片段，因为“共享布局”并不完全是一个常用术语，所以我不完全确定您的意思。

我相信您遇到的问题本质上是您在页面上的整个精美布局中拥有想要打印的内容，并且您希望禁用所有精美样式并仅打印（本质上）某个部分内的信息。有两种方法可以实现这一目标。

首先，这是一种蹩脚的解决方案：复制要打印的部分，将父容器设置为 display:none 除了 @media 打印查询。随心所欲地设计风格。在媒体查询中将主要父容器设置为 display:none 。您最终会得到相同内容的两个版本，但其中 1 个版本将始终完全隐藏。

第二个选项是技术上更熟练的选项，但需要更多的工作，您可以将所有非打印样式包装在 @media only 屏幕查询中。这将禁用除打印样式之外的所有样式。这是一个示例：https://jsfiddle.net/sydneymvo/Lkqu0gwr/4/您可以右键单击页面并选择打印以查看其实际效果

@media only screen {
  .print {
    background: wheat;
    padding: 1rem;
  }

  .no-print {
    background: lightblue;
    padding: 1rem;
  }
}

@media print {
  .print {
    background: white;
    padding: 4rem;
    border: 10px solid red;
  }
  .no-print {
    display: none;
  }
}

<div class="print">
  <h1>hello world</h1>
</div>
<div class="no-print">
  <p>This shouldn't print</p>
</div>