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

问题描述

鉴于调用window.print()(或在chrome中使用“打印/另存为pdf”选项)时,认情况下不会显示Slate文档,并且打印时的最佳样式可能与网页中显示的样式不同,有什么好的方法可以创建Slate仪表板的“打印版本”?

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

解决方法

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

enter image description here

enter image description here

,

Slate已针对快速应用程序开发进行了优化。底层框架对布局样式的可配置性没有什么限制。结果,Slate无法以适合于打印媒体或导出的方式通用地渲染所有应用程序。应用程序开发人员将需要逐个应用程序投入时间来支持打印。

第一个最佳选择是考虑为什么有要求或要求打印您的应用程序。您的用户是否只需要保留他们创建的视图并在以后引用它或在演示过程中使用它的方法?在这种情况下,请考虑使用(或突出显示要使用的用户)内置的获取共享链接功能。在“视图”模式下,它位于“操作”菜单下-在编辑模式下,您可以使用Slate.saveView操作和Slate.viewSaved事件以编程方式创建它们,然后使用Slate.loadView操作加载以前保存的视图

这将创建一个具有唯一ID的URL,该URL将在每次加载链接时将所有页面小部件恢复为生成链接时所处的状态。这意味着,例如,一组输入小部件将默认为用户配置的输入,并将其输入查询等。 结合每个用户的存储缓存,可以构建工作流以保存给定用户的预览“视图”列表,并在将来重新加载它们。

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

要开始,您需要至少将其添加到“全局样式”中:

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


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

您可以在诸如此类的各种文章中阅读有关用于打印的媒体CSS的更多信息。

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