Flow2Pdf

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

Requirements

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

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.

Interface Configuration

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.

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

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.