在打印时缩放HTML以适合一个页面

Question

我有一个网页,其图表的大小应该固定为width:1660px;height:480px;使用CSS.页面(我可以链接到它吗？)在浏览器中正确显示,但是当在谷歌浏览器中打印时(我还没有测试过其他浏览器),它在水平方向上太大而无法放入单个页面中.如何缩放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%;
    }
}

在任何一种情况下,除非您也创建新的JavaScript控件,否则用户无法在使用CSS时禁用该效果.

Answer 1

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

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

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