如何创建可打印的 Slate 文档？答案

【问题标题】：How do I create a printable Slate document?如何创建可打印的 Slate 文档？
【发布时间】：2021-12-06 21:50:53
【问题描述】：

鉴于在调用window.print()（或使用 chrome 中的打印/另存为 pdf 选项）时默认不显示 Slate 文档，并且打印时的最佳样式可能与显示在网页中时不同，那么有一些创建 Slate 仪表板“打印版本”的好方法吗？

我也在考虑隐藏滑块和搜索字段、添加分类水印、调整徽标位置等。

【问题讨论】：

【解决方案1】：

Slate 针对快速应用程序开发进行了优化。底层框架对布局我们的样式的可配置性几乎没有限制。因此，Slate 无法以适合打印媒体或导出的方式普遍呈现所有应用程序。应用程序开发人员需要逐个应用程序投入时间来支持打印。

首先，最好的选择是考虑为什么需要或请求打印您的应用程序。您的用户是否只需要一种方法来保存他们创建的视图并在以后引用它或在演示期间使用它？在这种情况下，请考虑使用（或突出显示您的用户使用）内置的 Get Shareable Link 功能。在查看模式下，它位于操作菜单下 - 在编辑模式下，您可以使用Slate.saveView 操作和Slate.viewSaved 事件以编程方式创建这些，然后使用Slate.loadView 操作加载以前保存的视图。

这将创建一个带有 id 的唯一 url，该 url 将在加载链接时将所有页面小部件返回到它们在生成链接时所处的状态。这意味着，例如，一组输入小部件将默认为用户配置的输入并提供给查询等。结合每个用户的存储缓存，这使得构建工作流来保存给定用户的预览“视图”列表并在将来重新加载它们成为可能。

如果您确实必须打印或导出，则需要定义其他媒体 CSS 样式以帮助您的应用程序正确呈现。

首先，您需要至少将这个添加到全局样式中：

@media print {
@page {
size: A4;
}


html, body {
height: 600mm !important;
}
}

您可以在 this 或 this 等各种文章中阅读有关用于打印的媒体 CSS 的更多信息。

打印“响应式”应用程序或任何具有复杂样式或布局的应用程序将非常困难。在这些情况下，请考虑将“打印视图”创建为一个单独的应用程序，该应用程序通过 URL 参数接收必要的输入，并生成一个针对打印优化的简化视图。这会增加开发成本和维护负担，但会产生令人满意的行为。

【讨论】：

【解决方案2】：

如果在应用上述全局样式后，打印输出仍然被截断，请尝试使用 Chrome 中的“使用系统对话框打印”选项，该选项（至少在 Mac 上）将提供指定比例的选项（截图）。通过从 100% 缩小，您应该能够获得适合页面的完整 Slate 视图。

【讨论】：