如何根据 <div> 设置打印纸张尺寸？答案

【问题标题】：How to set printing paper size based on <div>?如何根据 <div> 设置打印纸张尺寸？
【发布时间】：2021-01-02 20:02:25
【问题描述】：

我想使用 POS 打印机创建一个简单的打印。目前我正在尝试使用 HTML/CSS，然后再使用 PHP（更喜欢核心 PHP，而不是框架）。

唯一的问题是，纸张尺寸自动设置为卷纸 (50mm x 80mm)，我无法根据它的内容设置纸张尺寸。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Testing Out</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
  <link rel="stylesheet" href="paper.css">
  <style>
    @page { size: 58mm 50mm }
    body.receipt .sheet { width: 58mm; height: 50mm }
    @media print {
      body.receipt {
         width: 58mm
      } 
    } 
  </style>
</head>

<body class="receipt">
  <section class="sheet padding-10mm">
    Test
  </section>
</body>
</html>

CSS：(From GitHub)

@page { margin: 0 }
body { margin: 0 }
.sheet {
  margin: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
}

/** Paper sizes **/
body.A3               .sheet { width: 297mm; height: 419mm }
body.A3.landscape     .sheet { width: 420mm; height: 296mm }
body.A4               .sheet { width: 210mm; height: 296mm }
body.A4.landscape     .sheet { width: 297mm; height: 209mm }
body.A5               .sheet { width: 148mm; height: 209mm }
body.A5.landscape     .sheet { width: 210mm; height: 147mm }
body.letter           .sheet { width: 216mm; height: 279mm }
body.letter.landscape .sheet { width: 280mm; height: 215mm }
body.legal            .sheet { width: 216mm; height: 356mm }
body.legal.landscape  .sheet { width: 357mm; height: 215mm }

/** Padding area **/
.sheet.padding-10mm { padding: 10mm }
.sheet.padding-15mm { padding: 15mm }
.sheet.padding-20mm { padding: 20mm }
.sheet.padding-25mm { padding: 25mm }

/** For screen preview **/
@media screen {
  body { background: #e0e0e0 }
  .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm auto;
  }
}

/** Fix for Chrome issue #273306 **/
@media print {
           body.A3.landscape { width: 420mm }
  body.A3, body.A4.landscape { width: 297mm }
  body.A4, body.A5.landscape { width: 210mm }
  body.A5                    { width: 148mm }
  body.letter, body.legal    { width: 216mm }
  body.letter.landscape      { width: 280mm }
  body.legal.landscape       { width: 357mm }
}

【问题讨论】：

标签： javascript php html css receipt

【解决方案1】：

使用这个 CSS

@media print {
   html, body {
    width: 80mm;
    height:100%;
    position:absolute;
   }
}

【讨论】：

看起来像静态大小。可以设置成自定义尺寸吗？示例：宽度为 80mm，高度是动态的（基于它所拥有的内容）
你能试试我编辑的 CSS，请告诉我@helloworld_id