如何找到可打印区域的实际周长？

问题描述 投票：2回答：1

我要做的是在用户可以与之交互的页面上创建一个区域，其大小与纸张的典型大小（A4）完全相符，这样用户就可以清楚地知道打印件的外观就像他们正在构建可打印区域（在访问打印预览之前）。我根本不想也不应该使用@media print。

似乎页面的可打印区域的周边有时仅对应于实际的浏览器窗口（window.innerWidth等），而在其他时候，位于更靠近页面中心的元素部分地从可打印区域排除或甚至完全被排除在外。

我似乎无法找到任何押韵或理由。我试过看SO，发现一个与可打印区域有关的问题，但是对于不同的语言/背景。试过看谷歌。没有。

[编辑]现在我想到它，它的行为有点像视口/视图裁剪/缩放。

有人知道如何找到网页及其周边的实际可打印区域？

Example

位置为right: 0的元素出现在页面的最右侧，并将包含在打印中，但具有讽刺意味的是，当它被拖到靠近屏幕中心时，相同的元素最终会被部分排除。

...
  <body>
    <div id="l"></div>
    <div id="r"></div>
    <textarea draggable="true" id="textarea"></textarea>
  </body>
...

@media print {
  #l, #r {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  #l {
    background: blue;
  }
  #r {
    left: 50%;
    background: orange;
  }
  #textarea {
    right: 0;
  }
}

enter image description here

However, if I drag the image closer to the center of the page, ironically it becomes partially excluded from the printable area...

enter image description here

javascript html css
1个回答
0
投票

通常，仅为打印目的而设计的特殊样式表与网页相关联。此样式表可以包含/排除任何内容。

这是关于设置打印样式表的some reading。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.