directus-extension-flow2pdf

Flow2Pdf

The flow2pdf extension is a bundle that allows directus to print data from flow results and liquid templates.

Requirements

• Node.js 18 or higher
• directus-extension-flow2pdf installed on your Directus instance.

Usage

The extension will add a new interface, endpoint and operation to your directus instance. Find the configurations for each interface type below

Interface Configuration

• Create a Flow with Webhook trigger and set the method as POST, now copy the id of the Flow. Make sure that the trigger is not asynchronous.
• Create a Button Links field in the desired collection and choose Flow2PDF as the interface.
• Create extensions/template directory and add your .liquid template.

• Flow Id: Id of the Flow you will be collecting data from (Note: the last operation of your Flow should return some JSON data ).
• Behavior: Accepts two values
  • print: To print the document from your printer
  • download: To download the document as PDF
• Template: the name of your liquid js template stored in extensions/templates directory. The data from your flow will be passed to the liquid file.
• label: The label of the button
• Icon: The icon of the button
• Type: The type of the button. Accepted values are primary, secondary, warning and danger
• Pdf Options: Options to customize the generated pdf. You should provide a json with the following parameters:

Name	Type	Default	Description
margin	number or array	0	PDF margin (in jsPDF units). Can be a single number, [vMargin, hMargin], or [top, left, bottom, right].
pagebreak	object	{mode: ['css', 'legacy']}	Controls the pagebreak behaviour on the page. See Page-breaks below.
image	object	{type: 'jpeg', quality: 0.95}	The image type and quality used to generate the PDF. See Image type and quality below.
enableLinks	boolean	true	If enabled, PDF hyperlinks are automatically added ontop of all anchor tags.
html2canvas	object	{ }	Configuration options sent directly to html2canvas (see here for usage).
jsPDF	object	{ }	Configuration options sent directly to jsPDF (see here for usage).

• Template: the name of your liquid js template stored in extensions/templates directory. The data from your last operation will be passed to the liquid file.

API endpoint

If you want to print a pdf from you own app (Vuejs, Reactjs, Angular...), you can use the exposed endpoint flow2pdf/print

• Trigger the flow using the extension sdk Guide to trigger a flow

• Run a POST request to the following endpoint http://your-directus-instance.com/flow2pdf/print Guide run POST request on custom Directus endpoint

• The body should match format { "flow_data": { "property1": "value1", "property2": "value2" }, "template": "path to your template" }

  • flow_data should contained the response you received after the flow was triggered
  • template is the path to your liquid file

• If the request is successful you'll get a response with the following format {"html": "The corresponding html"}

• You can then use html2pdf.js to transform the html output to a pdf

Extra

• You can add MARKETPLACE_TRUST="all" option in your directus env variables to be able to browser API/Hybrid extensions within the marketplace section of your directus app.