...
The task of generating properly formatted PDF files from arbitrary HTML content presents significant challenges to HTML app developers, and this is especially true in mobile or sandboxed environments, where resources and available APIs can be quite limiting. Below are a few tips and insights related to cross-platform HTML/JS PDF generation from within Pulsar for Salesforce:
Using HTML/JS Tables:
If you need to generate a PDF offline from your HTML/JS app, we've determined that the best approach is to avoid the use of <table> elements and instead build the page structure with <div> elements. It's been noted (https://stackoverflow.com/questions/9288802/avoid-page-break-inside-row-of-table/27209406) that <tr> elements do not appear to respect the break-inside/page-break-inside CSS attributes.
Note: If you are building your app to run within Pulsar FSLapp: Pulsar FSL app is utilizing Bootstrap 4. In the discussions around page breaks and <table> elements, it's been suggested that Bootstrap may impact this.
There are a number of suggested solutions in the Stack Overflow post. We have tested a few of the simpler ones (changing the attribute to break-inside and applying the properties to <td> elements instead of <tr>) without success. So we think using <div> elements as the primary structure of the document will be the easiest path forward.
Images and Canvas:
Using images, canvas elements and fonts will work in your custom HTML implementations, but it is possible to run into issues when attempting to generate PDF files, due to CORS rules or similar access restrictions imposed by the webview environment. Our recommendation is to convert each of these resources to a 'data URI' format with Base64 encoding.
...