打印时缩放HTML以适合一页 [英] Scale HTML to fit one page when printing

问题描述

我有一个带有图表的Web页面，该图表的大小应该使用CSS固定为width:1660px;height:480px;。页面(我可以链接到它吗？)在浏览器中可以正常显示，但在Google Chrome中打印时(我还没有测试其他浏览器)，它的水平方向太大，无法容纳在一个页面中。如何缩放HTML以适合一个打印页？

下面是输出可能是什么样子(Firefox 60)：

我尝试过这样的媒体查询：

@media print
{
    @page
    {
        size: 297mm 210mm; /* landscape */
        /* you can also specify margins here: */
        margin: 250mm;
        margin-right: 450mm; /* for compatibility with both A4 and Letter */
    }
}

但我在打印预览中看不到任何效果。

[编辑]

Internet Explorer 11似乎能够在打印对话框中自动缩放页面。我不知道为什么Google Chrome不能做到这一点。

[编辑]

我也尝试过转换页面。但是，Chrome和IE11的打印结果大不相同。

@media print
{
    html
    {
        transform: scale(0.5);transform-origin: 0 0;
    }
}

接下来，我尝试缩放页面。这很管用，但我不知道它是只影响Chrome，还是同时影响IE和Firefox。

@media print
{
    html
    {
        zoom: 50%;
    }
}

在这两种情况下，用户都无法在使用CSS时禁用该效果，除非您也创建了新的JavaScript控件。

推荐答案

很遗憾，这是一个非常常见的问题。根据我的经验，除了创建PDF之外，没有可靠的方法可以跨浏览器控制打印布局。有许多&Quot；HTML到PDF&Quot；软件包可用，但虽然这些软件包通常可以工作，但根据运行它们的浏览器的不同，它们也有类似的变体。有许多硬件问题(例如，屏幕大小)、浏览器设置(浏览器之间的固有差异加上本地设置的默认字体大小和其他配置设置)和用户设置(例如，页面缩放)基本上使这项操作(IMHO)几乎不可能实现，除非生成服务器端文档。

我确信这不是您希望听到的，但确保用户能够按照您(开发人员)希望的方式打印网页的唯一可靠解决方案是在服务器上生成完整的PDF。根据源语言(PHP、Python等)的不同，可以使用许多不同的包来实现这一点这对开发人员来说肯定是更多的工作，但你可以控制图像大小、文本大小、字体等-所有你应该能够用CSS控制的东西，并且知道页面将按预期打印。不是让页面上的打印按钮触发浏览器打印功能，而是让它从服务器下载页面的文件，所有文件都经过格式化，可以打印。你可以选择Letter(美国)或A4(世界上大多数其他地方)，这两个大小足够接近，大多数人可以在Adobe Reader或其他软件中进行调整，使其适合，而不会丢失数据或有太多空白。Google Docs和许多其他系统都做完全相同的事情，以便产生一致的输出。

如果您的文档真的只有一张图片，那么就更容易了。创建图像服务器端并将其嵌入到单页可下载PDF中。如果您不能轻松创建图像服务器端，您可以使用URLBOX(我已作为付费订户使用，但没有其他连接)等服务来生成图像，并将其下载到您的服务器以嵌入到PDF中。

这篇关于打印时缩放HTML以适合一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！