创建打印预览Web组件

本文详细介绍了 <print-preview></print-preview> 专为精确打印控制和预览而设计的 Web 组件，解决了将 1994-1996 年 VBA 应用程序迁移到基于 Web 的现代电子商务平台的重大挑战。 原始应用程序对 MS Access 报告的依赖需要一个强大的解决方案来在新的 Web 环境中生成可打印的文档，例如装箱单和发票。

<print-preview></print-preview> 组件提供了几个关键功能：

• 所见即所得打印预览：准确显示打印时出现的内容。
• 全面自定义：允许对纸张尺寸、字体、边距和图像处理（显示、隐藏或轮廓）进行细粒度控制。
• 动态内容模板：支持生成发票等动态文档的模板，镜像 MS Access 报告的功能。
• 国际化 (i18n)： 轻松适应多种语言。

实施：

该组件集成到 HTML 中如下：

<print-preview><paper-sheet><h1 id="Hello-Printer">Hello, Printer!</h1><p>This will look great on paper.</p></paper-sheet></print-preview>

每个 <paper-sheet></paper-sheet> 元素代表一个页面。 重要的是，该组件必须是 元素的直接子元素，并且只允许一个实例。 该组件通过 JavaScript 加载：

import PrintPreview from './index.js';

并使用preview()方法显示：

const printPreview = document.querySelector('print-preview');
if (printPreview) printPreview.preview();

模板示例（发票）：

模板取代了 Access 报告的功能：

const invoiceTemplate = (data) => 
  data.map((obj) => {
    // ... (Invoice data processing) ...
    return `
    <paper-sheet><h2 id="Invoice">Invoice</h2>
      <p> ... </p>
      <table part="table"></table></paper-sheet>
    `;
  }).join('');

使用 CSS 和 ::part 进行样式设置：

CSS 和 ::part 伪元素提供类似于报表设计器的样式功能：

print-preview {
  &::part(table) {
    border-collapse: collapse;
    margin-block-start: 4rem;
    width: 100%;
  }
  // ... (other styles) ...
}

也可以在模板中直接设置样式。

图像处理：

该组件允许控制打印预览中的图像可见性，提供显示、隐藏或显示为轮廓的选项，以节省打印机碳粉。

本地化：

使用 i18n 对象可以轻松配置组件的界面语言：

PrintPreview.i18n = {
  es: {
    // ... (Spanish translations) ...
  }
};

结论：

<print-preview></print-preview> 组件提供了一个强大的解决方案，用于管理 Web 应用程序中的打印输出，有效地取代了旧系统的报告生成功能。 作者指出，该组件仍在开发中，可能会收到更新和错误修复。 演示和 GitHub 存储库可供进一步探索。

封面图片作者：Wendelin Jacober：https://www.php.cn/link/86158a6b3924670a32dad65bbc41bd95

以上是创建打印预览Web组件的详细内容。更多信息请关注PHP中文网其他相关文章！