Versions Compared

Old Version 11

changes.mady.by.user geevall

Saved on

compared with

New Version 12

changes.mady.by.user Brad Sparks

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Generating PDF files offline - Some best practices


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.  
Canvas elements can be converted at runtime (prior to calling print/PDF APIs), using the convenient toDataURL() javascript API. For Images, the same thing can be done by drawing the image in a canvas element and using the toDataURL() API. Note: This particular method assumes a canvas element is available in your HTML page. Prior to generating the PDF or printing the HTML, we recommend removing the canvas from the DOM using jQuery or similar libraries, as we cannot guarantee the PDF engine will render canvas elements properly at this time.
Fonts:
Font files may require pre-deployment processing to avoid issues loading during PDF generation or printing. Embedding Fonts as base64 data urls works best, as this can be inlined or added directly to precompiled framework CSS for inclusion in your HTML/JS.