4

我想调整 SPAN 元素样式的字体大小，直到 SPAN 的文本在纸上打印时为 7.5 英寸宽，但 JavaScript 仅以像素为单位报告 SPAN 的 clientWidth 属性。

<span id="test">123456</span>

进而：

#test {
  font-size:1.2in; /* adjust this for yourself until printout measures 7.5in wide */
}

进而：

console.log(document.getElementById('test').clientWidth);

我已经在一台机器上通过实验确定它使用大约 90 DPI 作为转换因子，因为上面的代码记录大约 675，至少在 Firefox 3 下是这样。

这个数字在不同的浏览器、打印机、屏幕等配置下不一定相同。

那么，如何找到浏览器使用的 DPI？我可以调用什么来在我的系统上恢复“90”？

4

9 回答 9

6

总结一下：

这不是您可以使用 HTML 解决的问题。除了CSS2 打印属性之外，浏览器没有定义或预期的打印方式。

首先，像素（在 CSS 中）不一定与像素（在屏幕上）的大小相同，因此某个值对您有效并不意味着它会转化为其他设置。

其次，用户可以使用页面缩放等功能更改文本大小。

第三，由于没有明确的方式来布置用于打印目的的网页，因此每个浏览器的做法都不同。只需在 Firefox 和 IE 中打印预览内容，然后查看差异。

第四，打印带来了一大堆其他变量，例如打印机的 DPI、纸张尺寸。此外，大多数打印机驱动程序都支持用户在浏览器从未看到的打印对话框中设置的输出缩放。

最后，很可能因为打印不是 HTML 的目标，网络浏览器的“打印引擎”（在我见过的所有浏览器中）与它的其余部分是断开的。您的 javascript 无法与打印引擎“对话”，反之亦然，因此“浏览器用于打印预览的 DPI 编号”不会以任何方式公开。

我推荐一个PDF文件。

于 2008-10-01T19:57:27.843 回答
3

我已经在一台机器上通过实验确定它使用大约 90 DPI 作为转换因子，因为上面的代码记录大约 675，至少在 Firefox 3 下是这样。

1）这在每台机器/浏览器上都一样吗？

当然不。每个屏幕分辨率/打印机/打印设置组合都会有所不同。除非您使用 em 而不是像素，否则确实有办法知道打印尺寸是多少。

于 2008-10-01T19:07:06.203 回答
2
  1. 不
  2. 你不

这实际上也因屏幕分辨率设置而变得更加复杂。

祝你好运。

于 2008-10-01T19:08:43.703 回答
2

我认为这可以满足您的要求。但我同意其他海报，HTML 并不真正适合这种事情。无论如何，希望你觉得这很有用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {width: 7in; border: solid 1px red;}
#span {display: table-cell; width: 1px; border: solid 1px blue; font-size: 12px;}
</style>
<script language="javascript" type="text/javascript">
function resizeText() {
  var container = document.getElementById("container");
    var span = document.getElementById("span");

    var containerWidth = container.clientWidth;
  var spanWidth = span.clientWidth; 
    var nAttempts = 900;
    var i=1;
    var font_size = 12;

    while ( spanWidth < containerWidth && i < nAttempts ) {
      span.style.fontSize = font_size+"px";

        spanWidth = span.clientWidth;

        font_size++;
      i++;
    }       
}
</script>
</head>

<body>
<div id="container">
<span id="span">test</span>
</div>
<a href="javascript:resizeText();">resize text</a>
</body>
</html>
于 2008-10-01T19:42:28.613 回答
1

网络不是印刷材料的好媒介。

于 2008-10-01T19:08:39.710 回答
1

正如其他答案所表明的那样，从网络打印是一件棘手的事情。这是不可预测的，遗憾的是并非所有浏览器和配置的反应都相同。

但是，我会向您指出这个方向：

您可以将 CSS 附加到专门用于打印的文档，如下所示

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

这样，您可以将页面的打印输出格式化为单独的样式表，并保留常规样式表以在屏幕上显示。我以前这样做过，效果不错——尽管它需要进行相当多的调整以确保打印的文档以您想要的方式出现。

一篇关于网络打印主题的有趣文章：

A List Apart - 准备打印

W3C 关于 CSS 打印配置文件的一些信息：

W3C - CSS 打印配置文件

于 2008-10-01T19:33:47.993 回答
0

如果您正在生成旨在以特定方式显示的内容，您可能希望查看旨在打印的格式，例如 PDF。HTML/CSS 旨在适应屏幕尺寸、分辨率、颜色深度等的不同配置。这并不是说一个盒子应该正好是 7.5 英寸宽。

于 2008-10-01T19:11:32.573 回答
0

你有没有尝试过

@media print { #test { width: 7in; }}
于 2008-10-01T19:35:01.207 回答
0

这是我从 Orion Edwards（尤其是 webkit.org 的链接）和 Bill 的帖子中学到的内容的合并答案。

似乎答案实际上总是 96 DPI，尽管您可以自由运行以下（诚然草率）代码，如果您得到不同的答案，我很想听听：

var bob = document.body.appendChild(document.createElement('div'));
bob.innerHTML = "<div id='jake' style='width:1in'>j</div>";
alert(document.getElementById('jake').clientWidth);

正如 webkit.org 文章所说，这个数字是相当标准的，并且不受您的打印机或平台的影响，因为它们使用不同的 DPI。

即使不是，使用上面的代码你也可以找到你需要的答案。然后你可以在你的 JavaScript 中使用 DPI，像 Bill 那样限制 clientWidth，结合使用英寸的 CSS，只要用户没有像 Orion Edwards 提到的那样做任何时髦的缩放，就可以正确打印出来——或者至少，在那之后，这取决于用户，他们可能想要做一些程序员没有想到的事情，比如在 11x17 纸上打印出程序员设计成适合 8.5x11 的东西，但它仍然会即使在那时，也可以为用户想要的东西“正常工作”。

于 2008-10-01T20:37:52.817 回答