Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

The JSAPI enables users to generate PDFs from their own custom HTML documents. Pulsar relies on several technologies in order to generate our PDFs offline. PDF generation is tricky business and requires a lot of effort to get working across all platforms.

Luckily, we’ve run into many of the issues ourselves and can provide some guidance to help you get your PDFs looking sharp.

iOS

When running on iOS Pulsar utilizes UIPrintPageRenderer to generate PDFs. Pulsar requires you to specify a node in the document that will represent your header. To do this, specify headernode in your saveAs request. This header will be printed at the top of each page. It’s important to note that you are responsible for ensuring that either the header is not included inside the docnode or that it is hidden from view.

When specifying a headernode you must also calculate and include the height in points for the header. We have done this in our own code by programmatically inspecting the scrollheight of the outermost node of the header. Once calculated, include headerheight specified as an integer inside the printoptions of the saveAs request.

It is also important to note that any styles necessary for the header should be done inline. We’d like to enable custom css for headers and footers, but that is a future improvement. One way that we at Luminix have addressed this issue is to programmatically move our header and footer into iFrames and then supply the iFrame as the headernode/footernode. In doing this we are able to add CSS in the head tag of the iFrames.

It should also be noted that iOS will draw page numbers on the header by default.

Windows

Windows follows the same format as iOS but it utilizes IronPDF. Windows requires you to add your own page numbers in the HTML. IronPDF gives you access to handlebars type variables like:

{page} {total-pages} {url} {date} {time} {html-title} & {pdf-title}

Android

Pulsar makes use of the native Chrome browser present on Android devices in order to render PDFs. This is achieved in a completely different way and we recommend that you have different templates for handling Android and iOS/Windows.

Android makes use of table structure to do repeating headers and footers.

<table id="droid-table">
  <thead id="sr-header-droid">
    <!-- Your header goes here -->
    <tr>
      <th> ... </th>
    </tr>
  </thead>

  <div id="sr-footer-droid" style="display: table-footer-group; width: 100%; bottom: 0; position: fixed;">
    <!-- Your footer goes here, not that this is not a tfoot div and requires special styling -->
  </div>

  <tbody id="sr-body-droid" *ngIf="subTemplate.body() as body">
    <!-- Your document body goes here, it can be many rows -->
    <tr>
      <td>...</td>
    </tr>
  </tbody>
</table>

This pathway needs more testing but should work.

  • No labels