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

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

您使用的主题看起来很花哨，所以我猜在折叠和显示侧边栏时会有一个过渡。
如果是这种情况，那么可以在这里找到解决方案：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在拍摄打印快照时几乎还没有开始动态显示宽度（由于过渡），因此：一个仍然可见的页边空白！

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