2

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

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

4

2 回答 2

2

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

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

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

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

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

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


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

您可以阅读更多关于用于打印的媒体 CSS 的各种文章,例如thisthis

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

于 2020-09-18T19:57:37.877 回答
1

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

在此处输入图像描述

在此处输入图像描述

于 2021-03-16T17:01:20.743 回答