0

We have a SPA (Single Page Application) SaaS product (https://www.webbsc.at/home/) which displays user's financial data and analysis. Obviously it would be great if the user could print the data to share the information easier (old-school sharing).

Now we made it our priority to improve the default layout but hit a wall. Most of the things we tried made the printed documents actually worse rather than better.

Afterwards I've checked how some framework / library websites look when printed:

I've also checked https://material.angularjs.org/latest/ and the templates referenced in http://www.getmdl.io/templates/index.html. Both looked terrible and were incomplete.

I was wondering initially, maybe I should replace masonry with something, which is easier to be printed (masonry defines the location of elements absolutely), but after seeing Material Design and MDL I'm wondering if we shouldn't take a different approach all together.

I know that my banking applications have a "pdf"-button, with which I can download the current page as a pdf. However, on one hand, that is quite an effort to implement (since rendering is done in browser via AngularJS) and on the other hand, I thought, I should embrace the functionality of the browser, instead of implementing something myself.

Should I redirect the user to a simpler website for printing, or have a second, very simple, template and switch when the user is printing? Or should I just give the possibility to download PDFs without caring how the printed dashboard looks like?

Or is there some other solution? I couldn't find too much information to printing SPAs.

Improve this question
1
  • If precise printing matters, do not attempt CSS go straight to PDF trust me it is not worth the pain!
    – scunliffe
    Commented Apr 26, 2016 at 12:27

2 Answers 2

Reset to default
4

This forum is about User Experience (not programmer experience) so I will give you the best answer from the users perspective, regardless of whether it is "quite an effort to implement".

The best experience for the user, is to have a page that prints perfectly without having to download a PDF, or open a new simpler web page.

If the user is very likely to print the information, then it might be helpful for some users to have a 'print button' on the website - I know mine is hidden away in browser menus.

(off topic: you can have a print only stylesheet that uses '@media print' to make sure your site looks good printed and a JS call to window.print() to pop up the dialog)

Improve this answer
0

You could create a separate page with simpler layout just for printing or as what Paul suggested, use CSS @media queries rule for printing. That being said, most of the css properties are not well supported in print. On top of that, you have to deal with the different printer settings and configuration.

If your content is just a simple layout with a few headers and text then using CSS print wouldn't be much of a problem. However looking at your app, your layout consist of complex tables and graphs, implementing it would be very challenging.

Maybe you could take to look at this piece of software Prince. I can't comment much on the software as I have not use it before.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.