如何创建可打印的 Slate 文档?

How do I create a printable Slate document?

考虑到调用 window.print()(或在 chrome 中使用 print/save 作为 pdf 选项)时默认情况下不会显示 Slate 文档,并且最佳样式可能会有所不同打印出来的比显示在网页上的要多,有哪些创建“打印版”Slate 仪表板的好方法?

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

Slate 针对快速应用程序开发进行了优化。底层框架对布局样式的可配置性施加了一些限制。因此,Slate 无法以适合打印媒体或导出的方式普遍呈现所有应用程序。应用程序开发人员将需要 app-by-app 投入时间来支持打印。

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

这将创建一个唯一的 url,其 ID 将在加载 link 时,return 所有页面小部件恢复到 link 已生成。这意味着,例如,一组输入小部件将默认为用户配置的输入并提供给查询等。 结合 per-user 存储缓存,这使得构建工作流以保存给定用户的预览“视图”列表并在将来重新加载它们成为可能。

如果您确实必须打印或导出,那么您将需要定义额外的媒体 CSS 样式以帮助您的应用程序正确呈现。

首先,您至少需要将此添加到全局样式:

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


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

您可以在 this or this.

等各种文章中阅读有关打印媒体 CSS 的更多信息

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

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