在打印

Question

我有一个网页，其中的图表应使用CSS修复为width:1660px;height:480px;的大小。页面（我可以链接到它吗？）在浏览器中正确显示，但是当在谷歌浏览器中打印时（我还没有测试过其他浏览器），它在水平方向上太大而无法放入单个页面中。如何缩放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之外，没有可靠的方法来控制浏览器之间的打印布局。有许多＆＃34; HTML到PDF＆＃34;软件包可用，但虽然它们通常有效，但它们的运行方式也各不相同。有许多硬件问题（例如屏幕尺寸），浏览器设置（浏览器之间的固有差异以及本地设置的默认字体大小和其他配置设置）和用户设置（例如，页面缩放）基本上使这个，恕我直言，几乎不可能，除了生成服务器端文档。

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

如果你的文件真的只是一张图片＆＃34;那就更容易了。创建映像服务器端并将其嵌入单页可下载的PDF中。如果您无法轻松创建服务器端映像，则可以使用URLBOX等服务（我用作付费用户，但我没有其他连接）生成映像并下载它们到您的服务器嵌入PDF。