Best practices for generating PDF snapshots

PDFs are generated by rendering your Klip or dashboard in a virtual web browser at a specific viewport (virtual window) size, applying PDF-specific CSS, creating an image, and then delivering it as a PDF file.

You may want to experiment with different configurations to determine what options work best for the snapshot you're trying to generate.

Layout

Portrait or landscape layout will determine the width at which your Klip or dashboard is rendered when it is converted to a PDF.

Portrait:

Klip: Rendered at 900px

Dashboard: Rendered at 1000px

Landscape:

Klip: Rendered at 1200px

Dashboard: Rendered at 1300px

To see how your PDF will look, resize your browser---in full screen TV mode to minimize empty space on either side---and observe the layout.

Size

Not all Klips or dashboards are well-suited to the same page sizes. Try different size settings to make sure your content fits well.

Fit to One Page

Force the rendered Klip or dashboards to fit on one page in the specified layout. This is handy if your dashboard isn't too big and you want to make sure it's a single page.

Multiple Pages

Use this setting if your Klip or dashboard is quite large. Klipfolio will try to move Klips in a dashboard layout to prevent them from being bisected by page breaks.

Multiple Pages (no breaks)

Use this setting if you've preconfigured your dashboard layout to avoid breaks.

Height

The height of your Klip or dashboard as rendered in a PDF is based on its content.

Approximate heights:

Portrait: 1150px

Landscape: 920px

Comments

Comments are rendered below a Klip or the entire dashboard and are optional.

Quality

The quality setting affects the file size of the rendered image and therefore the file size of the final PDF.

Note: Some HTML and Image components may not render on PDFs if they take too long to load.

 

Style

Cascading style sheets are used by Klipfolio to change the rendering style of Klips and dashboards  to better suit PDF and printed formats. Elements like borders, buttons, resize handles, and drop shadows are hidden. Color and padding are used to differentiate between Klips.

Customers, including those with custom themes and white-label account settings, cannot modify the styles applied to PDFs before generation.

Pro Tip

If you really, really, really want to see what your PDF will look like before it’s turned into a PDF, and you understand how to add classes and override CSS using your browser’s inspector, use this CSS file and add the imaging-ctx-save_as_pdf and imaging-target-tab classes to the element with the id kfdashboard.

Make sure your browser is close to the appropriate dimensions (ex. for a dashboard in landscape, 1300px by 920px), and in full screen mode.