Question

通过Javascript（或jquery）可以执行以下操作之一......

找出浏览器打印对话框的当前页面大小和方向。

OR

设置（或至少建议）浏览器打印对话框的页面大小和方向。

我有各种尺寸和尺寸的图像，我想提供一个可打印的表单，它可以充分利用所选的页面大小。即我想缩放和/或旋转图像，以便占用尽可能多的页面。

或者有没有办法在CSS中处理这个？

Answer 1

这超出了JS的范围，因为打印对话框是特定于操作系统的。

但是，最接近配置的是media queries in CSS或media attribute of <link> tags。而不是建议页面大小和/或方向，只需调整页面以适合打印。这也意味着屏幕上的CSS在打印时完全不同。只需确保创建HTML以适应这种情况。

或者更好的是，提供一个完全不同的页面，完全不同的CSS用于打印。这样，您就不必过度设计该单页，以便在超过1种媒体上看起来很好（并最终使用意大利面条）。

Answer 2

我不知道是否有任何方法可以定位适用于打印介质的特定页面尺寸，但是当用户以纵向打印时，您可以将横向图像旋转90度。这适用于Firefox（尚未测试其他人）：

<!DOCTYPE html>
<html>
  <head>
    <style>
      @media print {
        body {
          margin: 0;
        }
      }
      @media print and (orientation:portrait) {
        .landscapeImage {
          -moz-transform-origin: 200px 200px; /* set both values to half of image height */
          -ms-transform-origin: 200px 200px; /* set both values to half of image height */
          -webkit-transform-origin: 200px 200px; /* set both values to half of image height */
          transform-origin: 200px 200px; /* set both values to half of image height */
          -moz-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
        }
      }
      .landscapeImage { /* faux image */
        height: 400px;
        width: 600px;
        display: inline-block; /* not part of solution */
        box-sizing: border-box; /* not part of solution */
        border: 4px solid black; /* not part of solution */
      }
    </style>
  </head>
  <body>

    <div class="landscapeImage">
      Pretend this is an image
    </div>

  </body>
</html>

多页打印作业可能会复杂得多。

javascript可以获取或设置打印机信息吗？

2 个答案: