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

如何解决一些问题与打印非常基本的HTML

printing css

Tony · 技术社区 · 15 年前

我有一些非常简单的HTML:

<div id="advisor">
    <div id="print_this_container">
        <form>
            <input type="button" value=" Print this page "
                onclick="window.print();return false;" />
        </form>
    </div>
    <div id="top_section">
        <div class="left_box" style="position: relative;">
            <div id="avatar_container">
                <img class="avatar" src="<%= @advisor.avatar_url %>" />
            </div>
        </div>
        <div class="right_box">
            <h2><strong>Council on Emerging Markets</strong></h2>
        </div>
    </div>

</div>

#advisor{
    width: 800px;
}
#top_section{
    border-bottom: 1px solid #666 !important; 
    height: 200px;
}
.right_box{
    float: left; 
    padding-left: 25px; 
    padding-top: 50px; 
    width: 550px;
}
.left_box{
    background: #ccc; 
    width: 200px; 
    float: left; 
    text-align: center; 
    height: 100%;
}
img.avatar{
    width: 150px;
}

在我的print.css中

#advisor{
    width: auto;
    }
#print_this_container{
    display: none;
    }

在我的网页上看起来很棒。但是,打印时会出现以下问题:

图像缩小
右侧框显示在左框,它不浮动
消失

有人知道如何解决这些问题吗?

1 回复 | 直到 15 年前

Basic 15 年前

从浏览器中打印存在许多问题。很多特定于打印的内容在大多数浏览器上都不起作用,即使在多个浏览器支持的情况下,处理方式也不同

我们花了两个星期的时间尝试使用浏览器打印标签-最后,我们尝试了多种解决方案,这些解决方案尽可能优雅地失败了。。。

接下来,我们有一段代码,它将web浏览器加载到服务器的内存中,并在特定的URL处截取页面的屏幕截图—这将生成一个图像,然后返回到客户端进行打印。对于我们的场景,这是可以的,但是您可能需要检查高容量站点的mem用法等。

我们发现:页边距是一个真正的难题(尤其是对于标签!)。似乎只有某些版本的Opera允许您从CSS修改页边距

背景图像和颜色通常不会由浏览器打印(以节省墨水)-在大多数浏览器中都有一个选项来启用打印背景。

在firefox中查找about:config

print.printer_<PrinterName>.print_bgcolor
print.printer_<PrinterName>.print_bgimages

在IE中,我认为它在文件中->页面设置。。。

很明显,这两个都帮不上你的忙,因为它们不能由网站本身设置-这取决于用户是谁,你是否可以故意设置这个设置。如果做不到这一点,你可以尝试使用一个普通的非背景图片放在你的内容后面?

根据我的经验,float不适用于打印-但是,我已经有一段时间没有尝试过了,现在只要你为页面提供一个显式的宽度(100%?),这是可能的。目前,我认为大多数浏览器在打印媒体上使用shrink-to-fit作为默认值。

页面宽度是另一个有趣的特性-我只发现了非常有限的“宽度”属性,似乎可以工作-在一个点上,我几乎诉诸于表。到目前为止,百分比似乎运作良好,汽车公司没有。

试试看 Here 和 Here Here 浏览器兼容性图表