The flow2pdf
extension is a bundle that allows directus to print data from flow results and liquid templates.
directus-extension-flow2pdf
installed on your Directus instance.The extension will add a new interface, endpoint and operation to your directus instance. Find the configurations for each interface type below
Webhook
trigger and set the method as POST
, now copy the id
of the Flow. Make sure that the trigger is not asynchronous.Button Links
field in the desired collection and choose Flow2PDF
as the interface.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 printerdownload
: To download the document as PDFTemplate
: 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 buttonIcon
: The icon of the buttonType
: 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 triggeredtemplate
is the path to your liquid fileIf 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
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.