How do I create a printable Slate document?

Question

Given that Slate documents by default do not appear when calling window.print() (or using the print/save as pdf option in chrome), and also that the optimal styling may differ when printed than when displayed in a web page, what are some good ways to create a "print version" of a Slate dashboard?

I'm also thinking of things like hiding sliders and search fields, adding classification watermarks, adjusting logo placement etc.

Answer 1

Slate is optimized for rapid application development. The underlying framework imposes few limitations on the configurability of layout our styling. As a result, Slate is unable to generically render all applications in a manner suitable for print media or export. Application developers will need to invest time on an app-by-app basis to support printing.

The first, best option is to consider why there is a requirement or request to print your app. Do your users simply need a way to preserve the view they've created and reference it later or use it during a presentation? In this case, consider using (or highlighting to your users to use) the built-in Get Shareable Link functionality. In View mode it's under the Action menu - in edit mode, you can use the Slate.saveView action and the Slate.viewSaved event to create these programmatically, then the Slate.loadView action to load a previously saved view.

This will create a unique url with an id that will, whenever the link is loaded, return all the page widgets to the state they were in when the link was generated. This means, for example, a set of input widgets will default to the inputs configured by the user and feed into the queries, etc. In combination with the per-user storage cache, this makes it possible to build workflows to save a list of preview "views" for a given user and reload them in the future.

If you really must print or export, then you'll need to define additional media CSS styles to help your application render appropriately.

To start, you'll need to add at least this to the Global Styles:

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


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

You can read more about media CSS for printing in various articles like this or this.

Printing “responsive” applications or any application with complex styling or layout will be very difficult. In these cases, consider creating a “Print View” as a separate application that receives necessary inputs via URL parameters and generates a simplified view optimized for printing. This will increase the development cost and maintenance burden, but will result in satisfactory behavior.

Answer 2

If after applying the above Global Styles, the printout is still getting cut off, try using the "Print using system dialog" option in Chrome, which (at least on a Mac) will give the option to specify a Scale (screenshot). By scaling down from 100% you should be able to get the full Slate view to fit on the page.