chrome 和 safari 上的打印宽度不同

Posted 2023-03-06

【中文标题】chrome 和 safari 上的打印宽度不同

【英文标题】：Print width different on chrome and safari

【发布时间】：2017-01-13 01:32:28

【问题描述】：

我正在模态视图上实现报表查看器。 这些是一些打印样式：

@page
   margin: 5mm;


body
   visibility: hidden;

.modal-report
   width: 100%;
   height: 100%;
   margin: 0;

#report-view-container-id, #report-view-container-id *
   visibility: visible;

#report-view-container-id
   width: 100%;
   height: 100%;
   position: absolute;
   top:0;
   left: 0;


.report-view-container-letter

   max-width: 23.59cm;
   max-height: 27.94cm;
   min-width: 23.59cm;
   min-height: 27.94cm;
   padding-right: 15px; 
   padding-left: 15px;

在 Firefox 上，当我尝试打印效果很好时，宽度是完美的，但在 google chrome 和 safari 上，宽度约为 60%。 6 年前已经有一个question 被问过，但什么也没说。

在火狐上：

在谷歌浏览器和 Safari 上：

这有点 plnkr 试图重新创建我的案例

【问题讨论】：

请提供相关的 html，并删除任何对问题没有影响的 CSS（例如，我们不需要 visibility: visible，因为没有设置为 visibility: hidden）。如果您使用“sn-p”（如果您单击“编辑”，则为< > 图标，我们将能够看到结果演示！

【参考方案1】：

我在 Safari 中打印时遇到了类似的问题。文本没有换行，会从页面的右侧流出。为了解决这个问题，我在样式表中添加了以下内容。 nuke 最重要的元素是 Bootstrap 的 .container 类。

@media print 
html, body, main, header, footer, .container 
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    position: relative !important;
    text-indent: 0 !important;
    clear: both !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    overflow: visible;
    margin: 0 auto 0.5% auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0 !important;
    text-align: left !important;
    max-width: none !important;
    min-width: auto !important;
    min-height: auto !important;
    max-height: auto !important;
    direction: ltr !important;

之前：

之后：

【参考方案2】：

这还不是答案，但评论不会让我包含我需要的格式……

@page 不是有效的媒体查询，将被忽略。对于打印样式，这应该是@media print。 margin 没有被应用到任何东西——你想要类似的东西

@media print 
    mytargetelement 
        margin: 5mm
    

这对你的问题有帮助吗？

【讨论】：

这是我唯一可以提出的建议，直到您编辑您的问题以添加一个完整（但最小）的示例 :) ***.com/help/mcve