使用引导网格强制打印布局的视口大小答案

【问题标题】：Force view-port size for print layout with bootstrap grid使用引导网格强制打印布局的视口大小
【发布时间】：2014-10-17 02:14:25
【问题描述】：

我的页面在@screen-tablet 处呈现一个从水平到垂直的表格，大约为 760 像素。 A4 页面宽度约为 ~600px。

在我的print.css 中，我正在缩小所有文本，例如font-size:85%，以便所有默认字体大小为 14 的字体将在 12 左右打印。我还想显示格式它是水平状态，意思是 - viewport > 760px。问题是打印布局将页面宽度设置为 A4 ~600px 导致表单垂直显示。

有什么方法可以“欺骗”布局，使其认为它超过 760 像素？

（我希望得到一个不需要为打印设置全新布局的答案 - 只需让它看起来像在桌面上一样）。

【问题讨论】：

让我们的工作更轻松，并在以下网站上发布示例：www.jsfiddle.net 对我来说响应似乎很容易。

标签： css twitter-bootstrap printing

【解决方案1】：

我通过为打印定义单独的CSS Rules 来处理这个问题。您有两种选择：JavaScript 或Media query。

function printForMe()
{
  var mywindow = window.open('', 'Print Proposal', 'height=400,width=600');
  mywindow.document.write('<html><head><style>div{font-size:7pt;display:block;}body{padding:10pt;} .xt-print-box{page-break-inside: avoid !important;} a[href]:after { content:none !important; }</style>');
  mywindow.document.write($("head").html()); //Skip this line if you want to completely rewrite the styles and scripts therein header.
  mywindow.document.write('</head><body>');
  mywindow.document.write($("#myContent").html());
  mywindow.document.write('</head><body>');
  mywindow.print();
}

@media print { 
  div{font-size:7pt;display:block;}
  body{padding:10pt;} 
  .xt-print-box{page-break-inside: avoid !important;} 
  a[href]:after { content:none !important; }
}

【讨论】：

【解决方案2】：

为此，您可以使用@media 后跟任何这些

@media screen,@media print,@media screen, print

通过在绘制时定义任何样式的状态，您可以在@media screen, print 上定义适用于文档范围的每条规则。

就像您想将视口冻结为 700 像素一样，您可以为 @media screen,print and (min-width<=760px) { body,html{ min-width:700px;max-width:700px; }} 定义 @media print 规则。它定义并将您的视口设置为特定点。

注意：此规则也可用于其他工作，例如 transform 和 zoom 作为一个方面。

【讨论】：

【解决方案3】：

将transform 属性与媒体查询print 类型结合使用，例如：

@media print {
  html {
    transform: scale(0.8);
  }
}

这将允许您在不重排内容的情况下缩放文档。

CODEPEN 示例
transform Functionality Explained

【讨论】：

这不符合 OP 的要求。