HTML打印中PT单位的应用与实践

Hz 7/30/2023 HTML打印PT单位React-dnd

# 一、项目中的常规打印

1、常规状态下，把项目中css和对应HTML和写好，然后调用 window.print()即可。

2、进一步优化可以多增加一个预览页面

  /** 输出打印区域内容 */
  const PrintInnerHTML = (data: string) => `
  <!Doctype html>
  <html>
  <head>
      <title>Preview Content</title>
      <style>
      html,
      body {
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: auto;
          background-color: #f1f2f3;
          box-sizing: border-box;
      }

      .print {
          width: 594.3pt;
          height: 840.51pt;
          background-color: #fff;
          position: relative;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0px auto;
      }
      // 样式内容
      </style>
  </head>

  <body>
      <div class="print">
          <div id="printWarp">
              ${data}
          </div>
      </div>
  </body>
  </html>
  `;

  /** 打印 */
  const PrintElement = () => {
    const printContent = document.getElementById('printWarp'); // 打印区域
    window.document.body.innerHTML = PrintInnerHTML(
      printContent?.innerHTML as string
    ); // 追加
    window.print(); // 打印
    window.location.reload(); // 重新加载
  };

  /** 预览 */
  const Preview = () => {
    const printContent = document.getElementById('printWarp'); // 打印区域
    window.document.body.innerHTML = PrintInnerHTML(
      printContent?.innerHTML as string
    ); // 追加
    const html_ = document.documentElement.outerHTML; // 获取整个
    window.open()?.document.write(html_); // 预览
  };

# 绝对位置打印

现有固定A4不干胶纸，已经裁切好大小。需要针对每个裁切块做精确位置打印。

已知一张纸大小：210mm * 297mm，每个分切块大小：63.5mm * 28mm。

当我按照毫米单位(mm)去处理时，发现打印出来的效果和想要的结果有差异。

# PT 单位的应用

查询得知：有一个叫 PT 的单位。

px是像素单位、em是相对单位、pt是绝对单位。

pt全称为point，是排版印刷中常用的大小单位。

    1pt=0.35146mm
    1mm=2.83pt

    一张纸大小：210mm*297mm
    2.83 * 210 = 594.3pt
    2.83 * 297 = 840.51pt

    分切块大小：63.5mm*28mm
    2.83 * 63.5 = 179.705pt
    2.83 * 28 = 79.24pt

然后按照 pt 单位去排列每个分切快。页面框架部分（页面排版、分切块）都以 pt 作为单位。
内容区域按自己喜好px、pt都可以。

# 排版方式的打印差异

排版方式的选择会直接影响打印结果的展示

# 排版方式<壹>

排版方式<壹>：从左往右换行排列

第一次尝试是通过设置内边距padding，然后采用 flex 布局从左往右换行排列。

需要计算每个分切快的宽width高height。

但是最后的结果并不完美，第一排能完美对其，后面几列的对其越来越离谱。

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

# 排版方式<贰>

排版方式<贰>：容器绝对居中，容器内从左往右换行排列

先用flex布局框定整个区域内容（容器指的是整个区域内容）。

虽然有纸张、打印机的精度问题，但打印出来的效果会好很多。

    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;

# 优化：可拖动每个分切快

可选择某几个分切快拖动打印。

拖动采用的组件是 React-dnd (opens new window)，可以参考这个案例 (opens new window)

# 打印配置

为了能完美贴合纸张，需要改动打印配置项。

配置项设置方式如下：

边距：无
缩放：100%（不进行任何缩放）
选项：背景图形（建议勾选）

# 参见

PT 单位 (opens new window)

Hz-Cool

Choose mode