Overview

We need to Investigate the viability of using a style sheet approach for printing orders vs converting them to PDF on back-end. BE capacity is limited and if performance is comparable a FE solution would be favorable.

Summary

I've reviewed and tried several UI approaches to give user PDF with data, their overview below. Basically, there are two of them - option 1 and 2 tries give user pdf with what he sees on the screen and option 3 works similar way we expect back-end should - generate pdf from HTML template. To me it looks like the second approach with generating PDF from HTML template with placeholders looks preferable, since it gives you control on info you're going to put there and how it looks. It's not coupled to the UI code, so feature should be more stable between releases. On the other hand, first approach coupled too much to UI code and requires a lot of changes and support of all components used to display required data, it might cause issues in supporting that solution.

Regarding time consumption I would say it shouldn't make difference which approach to use.

JIRAs

• UIOR-667 - Getting issue details... STATUS
• UXPROD-2893 - Getting issue details... STATUS

Option 1

Plain browser Print function. User goes to Order details pane, clicks Print button under browser's menu.

Approach: firstly, using media print css queries create class to hide undesired elements on print step, to leave only Details pane. Secondly, using the same media print create proper css look for printed elements - we have scrollbars to display long Details pan content, both - vertical and horizontal. 

Pros:

• In exported pdf you've got almost the same content and styling as you see in the browser;

Cons:

• very specific to each place, every exporting thing contains a lot of css customization, almost non-reusable.
• every change on UI will be affecting printed version, might be flaky print result in the upcoming releases without notice;
• looks time consuming to implement, since required changes to common components styling ( stripes-components, etc.);

Option 2

using html2canvas and jsPDF. User goes to Order details pane, clicks Print Order button under order's actions menu.

Approach: html2canvas is  used to capture rendered page into an image, that later can be saved as pdf by jsPDF lib.

Pros:

• user gets PDF directly, without

Cons:

• since we can't use media print css queries it requires to re-implement required component on the page with styling appropriate for printing;
• svg elements are skipped;

Note: this tool more convenient for printing one particular component, since to print an hierarchy as Order details cause a re-implementing these for printing only.

Option 3 (recommended)

existing approach from ui-requests (UIREQ-382), ui-checkin (UICHKIN-66) - using html-to-react and react-to-print libs.  User goes to Order details pane, clicks Print Order button under order's actions menu.

Approach: create template using HTML with placeholders, using html-to-react populate it with data and react components to display, then save it as pdf with react-to-print lib.

Pros:

• we have control on what we print and how it looks;
• the result depends less on what we show in the browser, less code coupling - more bug-proof and predictable result;
• we might not use html templates for the initial version to save the time, it makes things simpler for start, but using them can provide nice possibility to control what needs to be printed later or even per customer.

Cons: not found at this moment.

Note: we need to know exact template for pdf, I expect it's custom for most exporting things;