css chrome新版本中打印隐藏部分的打印预览边距

s4n0splo  于 2022-12-27  发布在  其他
关注(0)|答案(4)|浏览(230)

我已经显示了一些屏幕截图,显示问题...

问题:

我尝试打印此页,只有表格,如打开侧窗格的图像所示,我已将该侧窗格放入print-hidden中,它在**Google Chrome 46.0.2490.71版本之前一直有效,但在@mediaprint css margin中进行下一次更新后不起作用。
目前我的Google Chrome版本是
48.0.2564.23**

侧窗格页面:

新版本的chrome显示的边距,如打印预览图像所示,这个问题只发生在chrome浏览器,它的工作在所有其他浏览器罚款

侧窗格页面打印权限:

无侧窗格页面:

无侧窗格页面打印权限:

我不明白为什么新版本的chrome需要print-hidden div的保证金...!!

    • 重要的是,它不工作在 chrome 最新更新,只有否则它是好的。**

请如果有人已确定在最新更新的 chrome 打印问题,请让我知道任何人都有解决方案。
如果你有任何问题想了解我的问题,你可以问。
谢谢你...

尝试:

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

GitHub上的问题:

GitHub Issue

Google Chrome论坛上的问题:

chrome 论坛问题

JsFiddle:

fiddle
在Jsfiddle中我使用了css属性margin-left,但它在Chrome最新版本中不工作,在47年后,它在旧版本中工作正常,直到**Google Chrome 46.0.2490.71**,但在下一次更新中,它是其他浏览器中的大问题,它像往常一样工作非常顺利...

vojdkbi0

vojdkbi01#

css中有2个问题。
1)媒体打印应该在末尾2)错误地在显示后的代码中添加了逗号: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;
}
}
c9qzyr3d

c9qzyr3d2#

先检查小提琴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;
}
}
wgx48brx

wgx48brx3#

您使用的主题看起来很花哨,所以我猜在折叠和显示侧边栏时会有一个过渡。
如果是这种情况,那么可以在这里找到解决方案:https://www.lockedowndesign.com/chrome-print-preview-differs-from-dev-tools/
简而言之:禁用打印样式表(media=“print”)中所有元素上的所有转换,方法是应用

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

...或在常规样式表中将其 Package 在“@media print”中。
在您的打印样式中,您将侧边栏的宽度设置为0 px,但Chrome在拍摄打印快照时几乎还没有开始动态显示宽度(由于过渡),因此:一个仍然可见的页边空白!

v8wbuo2f

v8wbuo2f4#

确保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");
      }
    },

相关问题