打印步骤

在本文中，您将了解：

• 如何在应用程序完成时打印所有数据
• 如何设计格式符合打印要求的步骤
• 如何在步骤中支持打印自定义控件

当您的公司开始在车间自动化纸质流程并实现表单数字化时，您可能仍需打印不同操作的结果，以便正确共享数据。

打印应用程序步骤

如果您希望实时打印 Tulip 应用程序中的数据（或保存为本地 PDF 文件），需要执行以下四项操作：

1. 配置一个（或多个）步骤，使其符合所需的打印尺寸。
2. 设计一个在打印后看起来条理清晰、易于理解的步骤。
3. 添加一个带有“打印”触发器的按钮。
4. 自定义打印设置，使步骤内容尽可能填满整页。

使用“打印步骤”触发器操作，您可以一次性打印单个步骤或整个步骤组。每个步骤将打印在单独的一页上。

配置步骤分辨率

首先，许多用户倾向于创建一个名为“报告”的步骤组，并将所有需要一次性打印的步骤添加到该步骤组中。

效果如下：

接下来，重要的是要适当配置该组中的步骤，使其以所需的分辨率进行打印。在应用中，导航至“上下文窗格”中的“步骤”选项卡，然后选择**“步骤分辨率”**。

在侧边窗格中，选择与所需纸张尺寸相匹配的分辨率。

对于 PDF 文档，通常建议使用“Letter 纵向”格式。匹配纸张尺寸可确保应用程序视图以整页形式打印出来。

设计步骤

您可能在应用程序中使用了包含大量纯色块的**“基础布局”**。虽然这种布局在向操作员传达信息方面效果良好，但您可能不希望在色彩丰富的步骤上浪费打印机墨水。

因此，建议从“报告”步骤中移除所有“基础布局”元素，转而侧重于文本内容。

以下是一个针对打印进行优化的步骤示例：

该步骤包含来自应用程序的 7 项数据以及 5 项测试结果。位于左上角和右下角的**“打印**”和**“菜单”**按钮采用白色背景，因此无需使用彩色墨水。

该步骤利用了 Tulip 中的以下功能：

• 网格控件，用于创建简单的视觉布局
• 变量文本，用于在步骤中嵌入不同变量的值
• 带自定义配色的按钮

添加“打印”按钮

打印按钮需要一个触发器操作。它通常与应用程序完成操作结合使用，但不能在同一个触发器中实现。您必须创建一个单独的按钮来触发应用程序完成操作。

因此，以下是一个触发器示例，它允许操作员打印当前步骤，并跳转到“报告”步骤组之后的步骤，在那里他们可以完成应用程序：

• “打印步骤” “报告”
• “转到步骤” “下一步”

您还可以将“打印”按钮放置在普通步骤上，并利用它打印整个步骤组，甚至无需向操作员显示这些步骤。

这将打开计算机的默认打印选项。

自定义打印设置

打印对话框

操作员会在各种尺寸的屏幕上使用 Tulip Player。因此，对于每台运行 Tulip Player 且需要打印或保存步骤的计算机，您都需要执行以下操作：

1. 将页面布局调整为与待打印步骤的分辨率相匹配。例如：Letter 纵向。
2. 将这些设置本地保存为“预设”，以便操作员日后能轻松选择：

为确保应用程序能正确打印，您应在打印前使用打印对话框中的**“预览”**选项，查看应用程序的打印效果。

在 PDF 中填写字段

您还可以通过将 PDF 嵌入步骤中，然后在 PDF 的适当位置放置“可变文本”控件，来打印出“已填写”的 PDF。该步骤将按 Tulip Player 中的显示效果进行打印。

具体操作如下：

1. 在步骤中嵌入一个尺寸与适当分辨率匹配的PDF。
2. 在 PDF 中的相应字段上方添加“可变文本”控件。当在播放器中使用该应用时，这些控件将动态填充内容。
3. 如果 PDF 包含多页，请在 Tulip 中为 PDF 的每一页添加一个新步骤，并重复上述操作。

将应用数据本地保存为 PDF

打印对话框也是将应用数据以 PDF 格式保存到本地计算机的最佳方式。请勿在系统对话框中点击**“打印**”，而是选择**“另存为 PDF**”，将步骤和实时数据保存到本地文件中。

技术说明

关于某些应用内容在打印时可能无法正常显示的规则。

• 变量文本控件中对“当前步骤”的任何引用，仅在按下**“打印”**按钮时打开的步骤上有效。
• “步骤进入”触发器不会在任何已打印的步骤上触发，因此您应确保在点击**“打印**”之前已添加正确的数据。
• 机器属性控件：这些控件很少能正常工作。若要生成捕获最后已知输出的报告，更好的做法是在机器输出上设置一个触发器，将输出存储到本地变量中，然后通过自定义控件显示该变量。
• 视频：对于 YouTube 视频，横幅图片将无法加载。

打印自定义控件

当您打印“播放器”步骤时，每个自定义控件都会作为其当前内容的静态快照被包含在内。当您捕获快照时，即使浏览器无法直接打印其嵌入的框架，控件也能可靠地打印出来。

控件快照行为

• 快照反映了打印开始时控件的状态，包括屏幕上的文本、布局、颜色、表单值、图像以及标准的二维画布内容。
• 如果同一个自定义控件在步骤中放置了多次，每个控件位置都会打印其自身的快照。
• 打印的快照是静态的：打印过程中，控件的 JavaScript 不会再次运行。任何依赖于beforeprint处理程序或其他打印时 JavaScript 的更改都不会显示。在打印开始前对控件所做的更改将被保留。
• **为了保持打印视图的静态性，系统会清理快照。**内联脚本、内联事件处理程序属性（如onclick、onerror 和onload）以及javascript: URL 都会被移除。这不会影响普通文本、布局、样式、图像或表单值。
• 控件自身的样式表会被捕获并重新应用，因此其样式得以保留。直接 CSS（包括@media print规则）会影响打印快照，因此若希望在打印中看到任何呈现上的变化，请使用 CSS 进行设置。

打印的小部件是在隔离环境中渲染的：与在屏幕上显示时一样，它既不会影响打印页面其余部分的样式，也不会从其余部分继承样式。打印视图还从一个干净的样式基线开始，因此如果您的部件依赖于特定的字体或颜色，请在小部件自身的 CSS 中显式设置，而不是假设使用默认值。

预期效果

打印旨在尽最大努力还原小部件的显示效果。

要获得最可预测的输出结果，请：* 将关键的打印内容保留在小部件的主文档中* 使用直接的 CSS 进行打印样式设置* 确保重要图片和数据在打印开始前已可见* 确保关键的打印信息不依赖于打印时* JavaScript、内联事件处理程序、视频或 WebGL 帧、嵌套网页或外部导入的样式。

限制

打印出的自定义小部件并非完美复现，依赖外部资源或浏览器特定渲染的内容可能会有所不同。

• 仅捕获小部件主文档中的内容：通过 Web Components、自定义元素或 Shadow DOM（例如 Lit）渲染可见界面的小部件不会被捕获，即使它们在屏幕上显示正确，打印时也会呈现为空白。 使用常见库（例如 Chart.js、D3 和 jQuery）构建的小部件会在主文档中渲染，因此不受影响。嵌套的 iframe 同样不会被捕获。
• 可直接读取的 CSS（包括@media print规则）将被保留。外部样式表和 CSS@import 规则仅按“尽力而为”原则处理，可能无法加载。
• 控件快照由播放器的打印页面加载，必须遵守其安全策略：
• 因此，在小部件自身框架内加载的资源（例如图像、字体、样式、背景图像或媒体文件）在打印时可能会被阻止。
• 与小部件帧相关的身份验证、混合内容规则、过期 URL 以及相对 URL 也可能导致资源无法加载。
• 加载缓慢的外部资源可能会缺失：打印过程会短暂等待资源加载，但不能保证每个资源都已加载完成。
• 二维画布仅在能够捕获其像素时才会打印：跨源（受污染）画布可能显示为空白，而 WebGL 画布通常无法被捕获。
• 视频的当前帧不会被捕获：无法保证视频、音频、嵌套网页、动画、文本选择、焦点、悬停状态和滚动位置会显示出来。
• 如果无法捕获当前快照，控件将使用其初始配置的 HTML 和 CSS 进行打印，而非其当前状态。

下表总结了常见的控件打印差异及其可能原因：

进一步阅读

• 如何打印应用中的所有步骤