在 CSS 或 JavaScript 中检测打印机的页面大小

Posted

技术标签:

【中文标题】在 CSS 或 JavaScript 中检测打印机的页面大小【英文标题】:Detect Printer's Page Size in CSS or JavaScript 【发布时间】:2013-08-01 19:44:51 【问题描述】:

问题摘要:我希望能够检测用户打印机的页面大小,以便可以根据打印机的页面大小发送不同的页面布局。

示例用例:我们的用户是企业。一些用户想要打印基本收据(因此他们有小型打印机)和一些用户想要打印发票(即普通 8" * 11" 页)。根据打印机的页面大小,我们可以识别应该发送到打印机的格式。

CSS 规范:理想情况下,应该有针对不同页面大小的 CSS 媒体设置。 CSS 标准一直在努力解决这个问题,并在 CSS 2.1 spec it says

但是,在选择打印介质时,打印机应该由 CSS size 属性提供的页面大小值指导。

CSS 3 spec appears to offer a good solution。

/* style sheet for "A4" printing */
 @media print and (width: 21cm) and (height: 29.7cm) 
    @page 
       margin: 3cm;
    
 

 /* style sheet for "letter" printing */
 @media print and (width: 8.5in) and (height: 11in) 
    @page 
        margin: 1in;
    
 

真实世界的实现:那么这是如何在主要浏览器中实现的。有没有人实施过这个?它适用于哪些浏览器?什么代码实际有效?

其他信息: It looks like this is working in a few browsers。这适用于页面大小,而不仅仅是横向/纵向。

@media print  @page size: landscape  

【问题讨论】:

我认为这只是 CSS,与 javascript 无关。 对,看起来最好的方法可能是 CSS,但我不在乎解决方案是否使用 CSS 和/或 JavaScript 顺便说一句,我不会将 width:21cm 之类的东西用于 A4,因为 A4 页面的宽度大约 21 厘米,而不是完全 21 厘米! (相差不到一个像素,但还是……) @Mr Lister:a4 正好 21 厘米宽。 ISO216 标准规定:四舍五入到整毫米。这样做是为了确保您可以从一张 a3 纸中获得 2 张 a4 纸。 @Wilbert 您总是可以从 A3 中取出 2 个 A4,而无需以整毫米为单位定义尺寸。 【参考方案1】:

以下媒体查询在收据打印机上对我来说一直可靠:

@media print and (max-width: 10cm)  

在一些相关的说明:不幸的是,这不起作用(客户必须手动将边距设置为无或最小)

@page  margin: 0; 

愉快的编码

【讨论】:

这在某些情况下有效。似乎我可以区分 A5 和 A4,但不能区分 A4 和 Letter。这对您是否始终有效? 嗨,Erik,我们正在使用它来区分 A4 和 Letter。我的猜测是你有一些其他的 CSS 覆盖它(也许使用 A4 太窄而看不到的最小宽度?) 您好,感谢您的反馈!好吧,它以一种非常奇怪的方式工作。我花了将近一天的时间来测试不同的组合。这就是我最终得到的结果:媒体打印和(最大宽度:12.782cm)页面边距:2.245cm 2.245cm; media print and (min-width: /*12.859*/12.782cm) page margin: 1.27cm /*2.54*/2.245cm; 12.782cm 对我来说毫无意义。但是,这可以see on my website 工作。我可以为 A4 设置不同的边距,为 Letter 设置不同的边距。 它可以工作,但如果我有一个较长的页面,并且如果我将其中一种格式的顶部和底部边距设置为大(比如说 10 厘米),那么看起来不同尺寸的不同边距正在影响就好像他们以一种奇怪的方式纠缠在一起。所以某些部分被切断了,当我应该有 2 或 3 页时,我只有 1 页。我可以创建一个新问题,提供更多详细信息和屏幕截图。然而,没有任何断点值有意义(你的是 10 厘米,我的是 12.782 厘米)。 A4 宽 21 厘米,信纸宽 21.59 厘米。我是否遗漏了什么或者这是与 Google Chrome 相关的错误? 好问题,我发现了一些打印机无法完全按预期工作的情况。我们的大多数客户都使用 Star Micronics 和 Epson 收据打印机,但这似乎也适用于更便宜的收据打印机。如果您的目标不是收据打印机,它可以很好地区别对待边距

以上是关于在 CSS 或 JavaScript 中检测打印机的页面大小的主要内容,如果未能解决你的问题,请参考以下文章

使用 Javascript 或 CSS 从 Internet Explorer 打印时隐藏页眉和页脚

在 CSS 或 JS 中检测 Kindle Fire

CSS / JavaScript / hacking:检测:链接上的访问样式*无需*直接检查或比我快

在 JavaScript 中使用媒体查询或在 CSS 中使用 if/else 语句

html中怎么用js打印一个多行不一样的标题或文字

如何使用 JavaScript 检测 CSS 变量支持?