Fix PDF Styling

[charliepnnl]

The problem we have had is that PrintJS is picking up styling for the html element that is calculated based on the html viewport. This leads to some parts of the PDF being squashed to the left of the page.

It appears that a way to overcome this issue is to abandon the idea of getting the styling from the html element itself. Instead, we need to apply the same styling using the css print-js option. Here are the needed options to print-js print function:

css: ['https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css', '/App.css'],
documentTitle: 'DOE - Quality Installation Report',
printable: printContainerId,
scanStyles: false,
type: 'html', 

The scanStyles: false option tells PrintJS to ignore the existing styling on the html element. The bootstrap and App.css styling gets us most of the styling we need – and it is calculated based on the print width, not the html viewport width. However, some issues remain:

• We should not use cdn to get the bootstrap styling since the web app is intended to work offline. Instead, we should use a local copy. We have a local copy on _nodemodules that could be copied over as part of the start and build scripts.
• Any styling we have applied to our components directly will not be included in the print version. Rae's PR, https://github.com/pnnl/Quality-Install-Tool/pull/110 moves the direct styling we have on components to App.css.
• The styling that handles page breaks will need to be added to App.css.
• Rather than restricting the vertical height of images in css, we should restrict the height of the photos as they are stored in the database. An exception will be when we allow multiple photos for the same PhotoInput.

[charliepnnl]

@jackcruz53 Another piece of styling that needs to be updated is how we style h1, h2, ...

I suggest looking at how bootstrap handles them and do something similar. I believe bootstrap adjusts their size according to the viewport width, which is a nice touch. There are two aspects that we need to change compared to bootstrap:

• Bootstrap tends to make them excessively big.
• We want to center h1.

[charliepnnl]

@jackcruz53 Since a copy of App.css needs to put placed in the public folder in order for PrintJS to find it, the copy webpack plugin (https://github.com/webpack-contrib/copy-webpack-plugin) should be used to copy App.css to public/print.css.