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

概述我有一个网页,其图表的大小应固定为宽度：1660px;高度：480px;使用CSS.页面(我可以链接到它吗？)在浏览器中正确显示,但是当在谷歌浏览器中打印时(我还没有测试过其他浏览器),它在水平方向上太大而无法放入单个页面中.如何缩放HTML以适合一个打印页面？这是输出的样子(Firefox 60)：我试过搞乱这样的媒体查询：@media print {

我有一个网页,其图表的大小应固定为宽度：1660px;高度：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时禁用该效果.最佳答案不幸的是,这是一个非常普遍的问题.根据我的经验,除了创建pdf之外,没有可靠的方法来控制浏览器之间的打印布局.有许多“HTML to pdf”软件包可供使用,但虽然这些软件包通常可以使用,但它们的运行方式也各不相同.有许多硬件问题(例如屏幕尺寸),浏览器设置(固有的)浏览器之间的差异加上本地设置的默认字体大小和其他配置设置)和用户设置(例如,页面缩放)基本上使这个,恕我直言,几乎不可能除了通过生成服务器端文档.

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

如果您的文档真的“只是一个图像”,那么它就更容易了.创建映像服务器端并将其嵌入单页可下载的pdf中.如果您无法轻松创建服务器端映像,则可以使用URLBOX(我用作付费订阅者,但我没有其他连接)等服务生成映像并将其下载到服务器进行嵌入在pdf中. 总结

以上是内存溢出为你收集整理的在打印时缩放HTML以适合一个页面全部内容，希望文章能够帮你解决在打印时缩放HTML以适合一个页面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。