在CSS或JavaScript中检测打印机的页面大小 [英] Detect Printer's Page Size in CSS or JavaScript

问题描述

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

Question Summary: I want to be able to detect a user's printer's page size so that I can send a different page layout based on printer's page size.

示例用例：我们的用户是企业。有些用户想要打印基本收据（因此他们使用小型打印机），而某些用户想要打印发票（即普通的8 * 11页）。根据打印机的页面大小，我们可以识别应该发送给打印机的格式。

Example Use Case: Our users are businesses. Some user's want to print basic receipts (and so they have small printers) and some users want to print invoices (i.e. normal 8" * 11" pages). Based on the printer's page size we can recognize what format should be sent to the printer.

CSS规范：理想情况下，应该有CSS介质设置不同的页面尺寸。 CSS标准一直在为此工作，并且在 CSS 2.1规范中说

CSS Specification: Ideally there would be a CSS media setting for different page sizes. The CSS standards have been working on this, and in the CSS 2.1 spec it says

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

However, a printer should be guided by the page size value supplied by the CSS size property when choosing the media to print on.

CSS 3规范似乎提供了很好的解决方案。

/* 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;
    }
 }

真实世界的实现：那么如何在主要的浏览器中实现这一点。有人实施过吗？它在哪些浏览器中工作？什么代码真正有效？

Real World Implementation: So how is this being implemented across the major browsers. Has anyone implemented this? What browsers does it work in? What code actually works?

其他信息：
这似乎在某些浏览器中有效。

@media print { @page {size: landscape } }

推荐答案

以下媒体查询已经为我可靠地工作了收据打印机：

The following media query has been working reliably for me with receipt printers:

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

有一点相关的注释：不幸的是，这不起作用（客户必须手动将边距设置为无或最小）

On a somewhat related note: Unfortunately, this isn't working (customers have to manually set margins to none or minimal)

@page { margin: 0; }

快乐编码

这篇关于在CSS或JavaScript中检测打印机的页面大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！