Question

我希望调整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”？

Answer 1

总结：

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

首先，A pixel (in CSS) is not neccessarily the same size as a pixel (on your screen)，因此某个值适合您的事实并不意味着它会转换为其他设置。

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

第三，因为没有明确的方法来布局用于打印的网页，所以每个浏览器都有不同的方式。只需在firefox vs IE中打印一些预览，看看其中的区别。

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

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

我推荐一个PDF文件。

Answer 2

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

1）每个都是一样的   机/浏览器？

绝对不是。每个屏幕分辨率/打印机/打印设置组合都会有所不同。除非你使用的是em而不是像素，否则我们确实知道打印尺寸是多少。

Answer 3

没有
你没有

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

Answer 4

网页不适合印刷材料。

Answer 5

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

但是我会指出你这个方向：

您可以将CSS附加到专门用于打印的文档

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

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

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

A List Apart - Going To Print

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

W3C - CSS Print Profile

Answer 6

我认为这可以满足您的需求。但我同意其他海报，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>

Answer 7

如果要生成特定方式的内容，您可能需要查看要打印的格式，例如PDF。 HTML / CSS适用于不同的屏幕尺寸，分辨率，颜色深度等配置。它并不是说盒子应该是7.5英寸宽。

Answer 8

你试过吗

@media print { #test { width: 7in; }}

Answer 9

这是我从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的东西，但是，它仍然会即使在那时用户想要的“正确工作”。

如何在JavaScript中将像素转换为打印英寸？

9 个答案: