CSS @media print with inches 在打印后给出其他尺寸

Posted 2023-03-06

【中文标题】CSS @media print with inches 在打印后给出其他尺寸

【英文标题】：CSS @media print with inches gives other sizes after printing

【发布时间】：2019-08-10 17:46:51

【问题描述】：

我正在制作一个项目，我必须在其中打印页面的单个 div。问题是当我尝试打印内容时，@page 标签不会影响任何内容。另外，我决定简单地将我想要打印的真实世界尺寸放入元素中，但打印内容的尺寸与指定的尺寸不匹配。

我的css代码是：

@media print 
    @page 
        width: 3.5in;
        height: 2in;
    
    body * 
        visibility: hidden;
        border: 1px solid black;
    
    #ticket, #ticket * 
        visibility: visible;
    
    #ticket 
        position: absolute;
        left: 0;
        top: 0;
        background-color: #ff0000;
        border: 1px solid yellowgreen;
        width: 3.5in;
        height: 2in;
    

我已经尝试过 @page size: A3 之类的东西和很多东西，但它不起作用。 基本上我需要能够打印真实世界尺寸的东西，当我点击打印时，打印配置正确处理样式表， 我不知道这是否可能，或者是否有一种简单的方法可以实现这一点。

提前致谢

【参考方案1】：

@PAGE 规则 @page 规则允许您指定页面框的各个方面。例如，您需要指定页面的尺寸。以下规则指定默认页面大小为 5.5 x 8.5 英寸。如果您打算打印一本书，也许是通过按需打印服务，那么找出您可以使用的尺寸很重要。

@page size: 5.5in 8.5in; //尝试像这样应用高度宽度

【讨论】：

当我这样做时，当我点击打印时，我仍然在看同样的东西。它为我设置了默认的字母。即使我减少了很多页面大小也不会改变。

你也可以分享 html 吗？它将更好地概述问题

代码真的很简单。是一个反应组件，现在我只是在测试这个：<div id="ticket">Just print this</div>

【参考方案2】：

我不太确定您在帖子中指的是什么，但我觉得这可能会有所帮助。

创建一个 CSS 样式表或简单地在您的 HTML 标头中添加 样式标记。

    <style>
        @media print 
           @page 
                  size: 5.5in 8.5in ;
                  size: landscape;
                 
             
     </style>

这样，您的窗口打印中将禁用纸张大小和布局选择。希望这会有所帮助。

【讨论】：

我想从我的 HTML 中打印一张名片。当我将页面发送到打印机并测量结果时，内容的大小不准确。