你怎么把素印刷英寸JavaScript?

StackOverflow https://stackoverflow.com/questions/159183

  •  03-07-2019
  •  | 
  •  

题

我想调整的字体的跨元素是风格，直到它的跨度的案文是7.5英寸宽的时候打印出来，但JavaScript只报告的跨度的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);

我已经通过实验确定在一台计算机上，它采用大约90DPI作为一个转换的因素，因为上述代码记录大约675，至少在火狐3.

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

所以，我怎么找到DPI浏览器是使用？什么我可以打电话找回"90"在我的系统？

有帮助吗？

解决方案

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

其他提示

总结：

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

首先，像素（在CSS中）不一定与像素大小相同（在您的屏幕），因此某个值适合您的事实并不意味着它将转换为其他设置。

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

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

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

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

我推荐一个PDF文件。

  

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

     

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

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

  1. 没有
  2. 你不

这实际上是进一步复杂化，通过屏幕决议设置的。

好运气。

网页不适合印刷材料。

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

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

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

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

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

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

A List Apart - 打算打印

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

W3C - CSS打印配置文件

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

你试过吗

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top