打印时缩放 HTML 以适合一页

Question

我有一个带有图表的网页，该图表旨在使用 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 似乎能够在打印对话框中自动缩放页面。我不知道为什么谷歌浏览器也不能这样做。

[编辑]

我也尝试过转换页面。然而，在 Chrome 和 IE11 中打印的结果非常不同。

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

接下来，我尝试缩放页面。这工作得很好，但我不知道它是否只影响 Chrome 或者它是否也影响 IE 和 Firefox。

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

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

Answer 1

很遗憾，这是一个非常常见的问题。根据我的经验，除了创建 PDF 之外，没有可靠的方法来控制跨浏览器的打印布局。有许多可用的“HTML 到 PDF”包，但虽然这些包通常可以工作，但它们有类似的变化，具体取决于它们运行的​​浏览器。有许多硬件问题（例如，屏幕大小）、浏览器设置（固有浏览器之间的差异加上本地设置的默认字体大小和其他配置设置）和用户设置（例如，页面缩放）基本上使这一点，恕我直言，除了生成服务器端文档之外几乎不可能。

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

如果您的文档真的“只有一张图片”，那就更简单了。创建图像服务器端并将其嵌入到可下载的单页 PDF 中。如果您不能轻松地在服务器端创建图像，您可以使用URLBOX 等服务（我已将其用作付费订阅者，但我没有其他连接）来生成图像并将它们下载到您的嵌入 PDF 的服务器。