logo标签列表

Chrome新版中打印预览中如何设置打印隐藏部分的边距？

cssgoogle-chromeprintingprint-preview
11

我展示了一些截图，显示存在问题...

问题：

我正在尝试仅打印带有表格的页面，并且如图中所示，在侧面窗格中，我将该侧面窗格放入print-hidden，并且在Google Chrome 46.0.2490.71版本之前它可以工作，但在下一个@media print CSS更新后，margin停止工作。

目前我的Google Chrome版本是48.0.2564.23

侧页：

带侧栏的图片

新版本的Chrome在打印预览中显示出margin，这个问题只发生在Chrome浏览器中，在所有其他浏览器中都可以正常工作。

侧页打印预览：

带侧栏的打印预览

没有侧页：

没有侧栏的图片

没有侧页打印预览：

没有侧栏的打印预览

我不明白为什么新版本的Chrome会接受print-hidden div的margin...!!

重要的是，它只在Chrome的最新更新中无法正常工作，否则它一直很好。

如果有人在谷歌浏览器的最新更新中发现了打印问题，请告诉我是否有解决方法。

如果您有问题需要了解，请随时提问。

谢谢...

尝试过的方法:

我试过给负的左边距，但在这种情况下，所有其他浏览器的打印预览都不正确。

在GitHub上的问题:

GitHub问题

在Google Chrome论坛上的问题:

谷歌浏览器论坛问题

JsFiddle:

示例代码

在JsFiddle中，我使用了CSS属性margin-left，但在谷歌浏览器最新版本中不起作用。自47版本以后，它在旧版本的谷歌浏览器中工作得很好，但在下一个更新中，它成为其他浏览器中的一个大问题，而在其他浏览器中，它的工作通常非常流畅...

我不确定我是否正确理解了您的意思。您是指“sidepane”具有“print-hidden”类，但它在页面上占用空间？请检查@print print-hidden类选择器是否具有"display:none"属性，因为"visibility:hidden"不会显示它，但会像已呈现一样占用空间。 - miguel-svq
即使我在@media print中给出margin-left:-200px;，在Chrome中却不能正常工作，在其他浏览器中，@media print可以正常工作...!! @miguel-svq - Sagar Naliyapara
请发布您的完成代码或提供演示。 - Alex
@SagarNaliyapara 请查看这个链接。我在Chrome v 47.0.2526.106 m中测试过了，它可以正常工作。 - Alex
@SagarNaliyapara，你解决了你的问题吗？它是像Q中的一种方式工作还是其他方式？ - J.Tural
@J.Tural 在 Chrome 版本 47 及以下可以工作，但在 48 beta 版本中无法工作。 - Sagar Naliyapara
4个回答
3
在CSS中存在两个问题。
1）媒体打印应该放在最后。 2）在display:none后，你错误地添加了逗号。
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{display:none !important},
#main-container {
    margin-left: 0px!important;
}
}

正确的CSS应该是:

#sidebar {
    width: 200px!important;
    opacity: 1;
    position: fixed;
}
#main-container {
    margin-left: 200px!important;
}
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{display:none !important}
#main-container {
    margin-left: 0px!important;
}
}
可以在 Chrome 版本 47 上运行，但无法在 48 beta 版本上运行。 - Sagar Naliyapara
2

首先检查这个fiddle：https://jsfiddle.net/ceh185bw/11/

我做了两件事，

1- 将打印放在底部

2- 重写了容器的边距

#sidebar {
    width: 200px!important;
    opacity: 1;
    position: fixed;
    border: 3px solid;
}
#main-container {
    margin-left: 200px!important;
    border: 3px solid;
}
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{
    display:none !important;
}
#main-container {
margin-left: 0px!important;
border:1px solid;
border: 3px solid;
}
#main-container {
    margin-left: 0px!important;
}
}
可以在 Chrome 版本 47 上运行，但无法在 48 beta 版本上运行。 - Sagar Naliyapara
我编辑了那个fiddle，缺少了;。Chrome beta没有人使用...你不能自动更新它...请参见http://www.w3schools.com/browsers/browsers_chrome.asp 48，它的beta有问题，但我的解决方案有效...+现在关注46，它是最常用的。 - J.Tural
1
有帮助的答案，但不是全局解决方案。 - Sagar Naliyapara
它不是全局的，因为他的问题更多地涉及到预定义属性的覆盖。 - J.Tural
0

你使用的主题看起来很漂亮，所以我猜测在折叠和显示侧边栏时涉及到了一些过渡效果。

如果是这样的话，解决方案可以在这里找到：https://www.lockedowndesign.com/chrome-print-preview-differs-from-dev-tools/

简而言之：禁用所有元素的过渡效果（media="print"）即可在打印样式表中找到。

* {
  -webkit-transition: none !important;
  transition: none !important;
}

...或者在普通样式表中使用“@media print”将其包装起来。

在您的打印样式中，您将侧边栏的宽度设置为0px，但是由于转换的原因，Chrome刚刚开始动画宽度（过渡）时就拍摄了打印快照，因此：仍然可见的边距！

0
确保不在html元素上使用dir属性，如果使用了，请在打印之前将其更改为“ltr”。
例如：
 printPDF() {
      const html = document.querySelector("html");
      const dir = html.getAttribute("dir");
      if (dir == "rtl") {
        html.setAttribute("dir", "ltr");
      }
      PrintElements.print(
        document.querySelectorAll(".print .content-pdf")
      );
      if (dir == "rtl") {
        html.setAttribute("dir", "rtl");
      }
    },
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接