当打印时，将HTML缩放以适应一页

Question

当打印时，将HTML缩放以适应一页

16

我的网页有一个图表，用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控件。

- posfan12

你想要添加另一页还是适应当前页面？ - לבני מלכה

我想将图表适配到一页打印纸上。 - posfan12

抱歉，我的意思是我想将整个HTML页面适配到单个纸张上，而不仅仅是图表。 - posfan12

你尝试过设置 html 或 body 的大小吗？ - Puka

我在Super User上找到了一个答案，在这里。看起来你需要处理浏览器而不是网页。 - posfan12

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- manassehkatz-Moving 2 Codidact · Accepted Answer

这是一个非常普遍的问题。根据我的经验，除了创建PDF之外，没有可靠的方法可以控制不同浏览器中的打印布局。虽然有许多“HTML转PDF”软件包可用，但它们通常存在差异，具体取决于运行它们的浏览器。屏幕大小、浏览器设置（不同浏览器之间的固有差异以及本地设置的默认字体大小和其他配置设置）和用户设置（例如页面缩放）等硬件问题基本上使得这几乎不可能，除非生成服务器端文档。

我相信这不是您想听到的，但确保用户能够按照您（开发人员）希望的方式打印网页的唯一可靠解决方案是在服务器上生成完整的PDF。这可以使用许多不同的软件包来完成，具体取决于源语言（PHP、Python等）。这对于开发人员来说肯定需要更多的工作量，但您可以控制图像大小、文本大小、字体等所有应该能够通过CSS控制的内容，并且知道页面将按预期打印。与其在您的页面上触发浏览器打印功能的打印按钮，不如让它从服务器下载页面文件，格式化并准备好打印。您可以针对信纸（美国）或A4（世界上大多数其他地方）进行定位，两种尺寸足够接近，大多数人都可以在Adobe Reader或其他软件中适应，使其适合而不会丢失数据或有太多的空白空间。Google文档和许多其他系统正是出于这个原因来产生一致的输出。

如果您的文档确实只是“一个图片”，那么操作就更简单了。在服务器端创建图像并将其嵌入到单页可下载的PDF中。如果您无法轻松地在服务器端创建图像，则可以使用URLBOX这样的服务（我已经作为付费用户使用过，但与之没有其他联系）来生成图像并下载到您的服务器以嵌入到PDF中。