html - 打印时缩放 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”包，但虽然它们通常有效，但它们有类似的变化，具体取决于运行它们的浏览器。存在许多硬件问题(例如，屏幕尺寸)、浏览器设置(固有的浏览器之间的差异加上本地设置的默认字体大小和其他配置设置)和用户设置(例如页面缩放)，恕我直言，除了生成服务器端文档外，这几乎是不可能的。

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

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