代码之家 › 专栏 › 技术社区 › apokryfos

打印中断引导布局

printing twitter-bootstrap-3 google-chrome css

apokryfos · 技术社区 · 7 年前

我有以下几页:

<头部>
<link href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”rel=“stylesheet”/>gt;
</head>
<正文>
<div class=“container”>
<DIV class=“row”>
<DIV class=“col-xs-12 col-sm-6”>
<P>列1,1在小行1在XS中</P>
</DIV>
<DIV class=“col-xs-12 col-sm-6”>
<P>XS中第2行第1、2列</P>
</DIV>
<DIV class=“col-xs-12 col-sm-6”>
<P>XS中第3行第2、1列</P>
</DIV>
<DIV class=“col-xs-12 col-sm-6”>
<P>XS中第4行第2、2列</P>
</DIV>
</DIV>
</DIV>
</body>
</html>>=



此页面在查看时如预期的那样出现(即,在小屏幕+上有2列2行,在移动设备上有4行),但问题在于尝试打印时。


当我在chrome中使用ctrl+p时,会得到以下预览:



页面大小设置为A4。这个问题不会出现在火狐中(但也会出现在IE和EDGE中)。

知道如何让打印视图呈现小(或中)布局而不是移动视图吗?
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <div class="container">
      <div class="row">
          <div class="col-xs-12 col-sm-6">
              <p>Column 1,1 in small row 1 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 1,2 in small row 2 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 2,1 in small row 3 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 2,2 in small row 4 in xs</p>
          </div>
      </div>
    </div>
  </body>
</html>

在查看时(即在小屏幕上有2列2行,在手机上有4行),此页面如预期一样出现,但在尝试打印时出现问题。

当我在chrome中使用ctrl+p时,会得到以下预览:

页面大小设置为A4。这个问题不会出现在Firefox中(但也会出现在IE和EDGE中)

知道如何让打印视图呈现小(或中)布局而不是移动视图吗?

2 回复 | 直到 6 年前

Devansh J 6 年前

演示

https://so51099397.surge.sh/

解释

width of A4 = 210mm â 8.27 in â 595 px (72 dpi)
xs width < 768px
所以从技术上讲,Chrome所做的是正确的,而其他浏览器所做的是错误的。

mobile-first 模式。

    .col-xs-12 {
        width: 100%;
    }
    @media (min-width: 768px){
        .col-sm-6 {
            width: 50%;
        }
    }

@media (min-width: 768px) 只有在印刷过程中,我的问题才能解决。
@介质(最小宽度:768px) document.styleSheets crossorigin="anonymous" 在引导程序中 <link>
一旦我们有了所有的款式,我们会用 <style> <head> 在 beforeprint
afterprint 如果我们要删除它 <

代码(与演示相同):

window.addEventListener("beforeprint", function(){
    let printStyleSheet = document.createElement("style");
    printStyleSheet.classList.add("print-stylesheet");
    document.head.appendChild(printStyleSheet)

    let printRulesText = "";
    Array.from(document.styleSheets).forEach(styleSheet => {
        Array.from(styleSheet.cssRules)
        .filter(rule => rule.media && /(min-width: 768px)/g.test(rule.media.mediaText))
        .forEach(rule => {
            Array.from(rule.cssRules).forEach(rule => printRulesText += rule.cssText)
        })
    })
    printStyleSheet.innerHTML = printRulesText;
})
window.addEventListener("afterprint", function(){
    Array.from(document.querySelectorAll(".print-stylesheet")).forEach(style => style.remove())
})

min-width: 768px 以及 min-width: 992px 同样适用于大型桌面(LG)

这行吗?

它适用于问题中的代码
它也适用于其他组件。

我能申请修一下吗 html, body { width: 769px } 打印期间?(同于769>768)

不,它不起作用,因为媒体查询起作用 viewport 而不是HTML或正文的宽度

好的,我可以追加吗 <meta name="viewport=" content="width=769"> 在打印过程中删除其他视区元?(同于769>768)

嗯…不,不行。(我认为应该是,但不知怎么地不起作用)

还有其他的解决方法吗?

手动覆盖 XS型 像@arex这样的风格

获取引导CSS源代码并使用 print 媒体查询如下:

.col-xs-12 {
    width: 100%;
}
@media (min-width: 768px){
    .col-sm-6 {
        width: 50%;
    }
}

/* add such rules everywhere */
@media print{
    .col-sm-6 {
        width: 50%;
    }
}

将当前页的所有内容放入 iframe 具有 width: 100%; height: 100%; border: none; 做其他的事情 display: none; .但我觉得它不起作用,因为如果 iframe名称 获取滚动条视图外的内容将无法打印。而且看起来更黑

附言:这很明显,但让我明确地说…实现的修复(如演示中所示)并不仅仅修复网格系统或问题中的代码片段…但修复了 所有组件 (按钮、表格、输入、网格等)通过假装 最小宽度:768px 媒体查询。这就是OP想要的。不单独固定部件

Arex 7 年前

使用 @media print 解决这个问题。如果打印预览,则显示SM的布局。

这是工作代码:

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <style>
        @media print
        {
            .col-xs-12
            {
                width:50%;
                float:left;
            }
        }
        
    </style>
  <div class="container">
      <div class="row">
          <div class="col-xs-12 col-sm-6">
              <p>Column 1,1 in small row 1 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 1,2 in small row 2 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 2,1 in small row 3 in xs</p>
          </div>
          <div class="col-xs-12 col-sm-6">
              <p>Column 2,2 in small row 4 in xs</p>
          </div>
      </div>
    </div>
  </body>
</html>

我希望这有帮助。