Intro

Demo

PDF Printing Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum odor amet, consectetuer adipiscing elit. Nec ligula fermentum sit sed a phasellus suspendisse vitae ultrices. Semper metus venenatis volutpat tortor mattis dolor fames. Himenaeos nam nulla sit accumsan cras inceptos vitae maximus. Sit volutpat metus posuere pulvinar in suscipit tempor. Diam ultricies odio sem libero tortor metus. Urna mauris consectetur vel vehicula quisque; porttitor ut. Venenatis vulputate auctor morbi efficitur integer risus. Massa eros tempor urna habitant; imperdiet condimentum platea?

Ac luctus senectus ut tempus, imperdiet sollicitudin sit. Montes hendrerit nulla cras justo magnis a praesent tortor. Quis varius urna penatibus faucibus euismod. Pharetra fusce litora urna ultrices litora. Blandit eu vel, tempus praesent mollis eu lectus. Augue torquent vel netus nisi donec dolor tristique mauris laoreet. Varius convallis faucibus feugiat condimentum ridiculus erat sagittis molestie. Dapibus inceptos iaculis etiam venenatis tristique platea.

Actions

• takeScreenshotPreview

  Captures a specified element on your app, generates a screenshot, and displays it in a preview container. Users can visually confirm the screenshot before choosing to download it.

  Arguments

  targetElementId	Specifies the ID of the HTML element you want to export. Requires a string representing the id of the target element.
  filename	Sets the name of the file for the downloaded PDF.
  margin	Sets the margin around the PDF content (default: 0).
  scale	Adjusts the rendering resolution of the PDF (default: 1).
  imageQuality	The quality of images in the PDF, from 0 to 1 (default: 0.98).
  unit	The measurement unit for the PDF (e.g., 'in', 'mm', 'pt') (default: 'in').
  format	The page size of the PDF (e.g., 'letter', 'A4') (default: 'letter').
  orientation	Defines the page orientation ('portrait' or 'landscape'; default: 'portrait').
  scrollY	Specifies the vertical scroll position for rendering (default: 0).
  useCORS	Enables cross-origin resource sharing for external resources (default: false).

  Events

  pdfGenerated	Triggered when the PDF is successfully generated, with the filename in the payload.
  pdfGenerationFailed	Triggered when PDF generation fails, with the error message in the payload.

Guide

• 1. Setup Exportable Element(s) to Your App

  a) Target Element
   • Add an element in your app layout that you want to export as a PDF.
   • Add an attribute called 'id'. Assign a unique id. You will use this in an argument later.
   • If you want to export an entire page add the id to the root element.
   • You can have multiple exportable elements, but each element needs its own unique id.

• 2. Add the Custom Action to a workflow, event, etc.

  a) Example - Add Buttons:
   • Create a button to trigger the generatePdf action.
  
  b) Add event to button:
   • Attach a workflow to the button and add the GeneratePdf action.
  

• 3. Configure Workflow Arguments

  a) Add the following arguments:
   • targetElementId: The id of the target element to convert (e.g., “capture”).
   • fileName: The desired file name for the PDF (e.g., “document.pdf”).
   • margin: The margin around the PDF content (default: 0).
   • scale: The rendering scale for higher or lower resolution (default: 1).
   • imageQuality: The quality of images in the PDF, from 0 to 1 (default: 0.98).
   • unit: The unit of measurement for the PDF (e.g., “in”, “mm”, or “pt”; default: “in”).
   • format: The page size of the PDF (e.g., “letter”, “A4”; default: “letter”).
   • orientation: The page orientation (“portrait” or “landscape”; default: “portrait”).
   • scrollY: Adjust the vertical scroll position when rendering the element (default: 0).
   • useCORS: Enable cross-origin resource sharing to include external resources (default: false).
  

• 4. Configure Workflow Context (optional)

  a) Add a context event
   • Create an event which triggers on success - Ex: Saved toast notification
   • Create an event which triggers on failure
  
  

FAQ

• Why can’t I select text in the generated PDF?

  The generated PDF renders the HTML content as an image, so the text becomes non-selectable. This is due to how html2pdf.js generates documents.

• Why is my PDF not rendering external images or styles?

  If external resources like images or styles are not rendering, ensure the useCORS argument is set to true to allow cross-origin resource sharing.

• Why is part of my content missing in the PDF?

  This can happen if the target element exceeds the page size. Ensure the format, orientation, and margin arguments are configured correctly, or adjust the content to fit the page.

• Why does the PDF render elements incorrectly or out of alignment?

  Some CSS styles are not fully supported by html2canvas. Check the layout and ensure no unsupported properties like position: fixed are affecting the rendering.

• Why does the PDF generation take a long time?

  High-resolution rendering (increased scale) or complex HTML structures with many images or styles can slow down the process. Simplify the content or reduce the scale for faster generation.

• Why does the generated PDF have blank pages?

  Blank pages may appear if the target element includes hidden or empty content. Ensure the target element contains visible content before generating the PDF.