Generate PDF

Audience: Low-code Engineers
Skill Prerequisites: HTML CSS

Uses wkhtmltopdf open source to generate PDF from HTML template.

Typical Use Cases

  • Generate receipts
  • Generate contracts

Don't use it to

  • Merge PDFs
  • Overlay PDFs

Related Actions

Action NameDescription
Apply TokensReturns the HTML code that generates the PDF.
Run SQL QueryExecute a SQL query that returns one or more variables so that they can be used in the HTML code.
Server RequestPerform a HTTP request that returns one or more variables that can be used in the HTML code.

Input Parameter Reference

ParameterDescriptionSupports TokensDefaultRequired
Html Input TypeSelect the HTML editor from the dropdown between 'Rich Text Editor' which interferes with the html code, or 'Codemirror' where you can paste the plain html code directly.NoRich Text EditorYes
HTML CodeWrite down the HTML code which will be used to generate the desired PDF.Yesempty stringYes
PDF NameGive a name to the PDF that will be automatically generated or leave empty for a random name given by GUID.Yesempty stringNo
Generated File DestinationSelect the path where the generated PDF will be saved.NoNone selectedYes
Paper SizeSelect size of paper the PDF will have.NoA4No
Orientation LandscapeCheckbox that set orientation to Landscape. Leave unchecked for Portrait orientation.NoUncheckedNo
GrayscaleCheckbox that generates the PDF in grayscaleNoUncheckedNo

Output Parameters Reference

ParameterDescription
Store DNN FileIdProvide a token name where the FileId from DNN will be saved.
Store Absolute URLProvide a token name where the absolute URL will be saved.
Store Relative URLProvide a token name where the relative URL will be saved.
Store Physical PathProvide a token name where the physical path will be saved.
Store LinkClick UrlProvide a token name where the LinkClick URL will be saved.

External Resources

Pictures

Including a picture in the PDF can be made using the image absolute URL. For example, if you want to include our logo in your PDF, you can use the following HTML syntax:

<img src="https://learn.plantanapp.com/img/pap-logo.png" alt="PlantAnApp Logo">

CSS

CSS can be used using the default HTML syntax in the default 3 ways: Inline, for example a red heading can be made using the following syntax:

<h1 style="color:red;">Heading</h1>

Internal, the previous example can be written in the header like this:

<html>
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Heading</h1>
</body>
</html>

External, you can load any external style sheet using this syntax in header:

<link rel="your_own_stylesheet" href="styles.css">

Note! A style sheet can be written in any text editor and the file will look something like this:

body {
background-color: blue;
}
h1 {
color: red;
}

JavaScript

JavaScript can also be executed when compiling a PDF file. The following code generates a PDF with red, centered and Arial font Heading, all made by the javascript found between script tags.

{
"Title": "Execute Actions",
"ActionType": "ExecuteActions",
"Description": "change font, text align and font using JS",
"Condition": null,
"Parameters": {
"ActionList": [
{
"Title": "Generate PDF",
"ActionType": "GeneratePDF",
"Description": null,
"Condition": null,
"Parameters": {
"HtmlInputType": {
"Expression": "",
"Value": "richtext",
"IsExpression": false,
"Parameters": {}
},
"HTMLCode": "<h1 id=\"heading\">Hello World!</h1>\n\n\n\n<p>\n\t<script>\n\tdocument.getElementById(\"heading\").style.color = \"red\";\n\tdocument.getElementById(\"heading\").style.fontFamily = \"Arial\";\n\tdocument.getElementById(\"heading\").style.textAlign = \"center\";\n\t</script>\n</p>\n",
"PDFName": "Testing-JS",
"PathDestination": {
"Expression": "",
"Value": "/",
"IsExpression": false,
"Parameters": {}
},
"OrientationLandscape": "",
"PaperSize": {
"Expression": "",
"Value": "A4",
"IsExpression": false,
"Parameters": {}
},
"Grayscale": "",
"OtherOptions": "--javascript-delay 1000",
"StoreFileId": "",
"StoreAbsoluteURL": "link",
"StoreRelativeURL": "",
"StorePhysicalPath": "",
"StoreLinkClick": "",
"ForceDownload": true
},
"$_uid": "action15952449891874616",
"$_isOpen": false,
"$_isLoaded": true,
"$_isFocus": true
},
{
"Title": "Redirect to URL",
"ActionType": "RedirectToUrl",
"Description": null,
"Condition": null,
"Parameters": {
"Url": "[link]",
"EscapeUrl": "",
"OpenInPopup": "",
"PopupTitle": "",
"OpenInNewTab": "",
"ForceDownload": true
},
"$_uid": "action15952449891871794",
"$_isOpen": false,
"$_isLoaded": true,
"$_isFocus": true
}
]
}
}

Examples

1. Generate a PDF using HTML/CSS directly into the action

​ The action below generates a simple PDF with custom CSS styles for title and paragraph. Import it into your application to see it in action. ​

{
"Title": "Execute Actions",
"ActionType": "ExecuteActions",
"Description": "simple example using html directly into the html code box",
"Condition": null,
"Parameters": {
"ActionList": [
{
"Title": "Generate PDF",
"ActionType": "GeneratePDF",
"Description": null,
"Condition": null,
"Parameters": {
"HtmlInputType": {
"Expression": "",
"Value": "codemirror",
"IsExpression": false,
"Parameters": {}
},
"HTMLCode": "<head>\n\t<style>\n h1 {\n color: red;\n text-align: center;\n }\n p {\n color: blue;\n text-align: left;\n }\n\t</style>\n</head>\n\n<body>\n\t<h1> \n Example \n \t</h1>\n\t<p>\n \tThis is a simple generated PDF. \n \t</p>\n</body>",
"PDFName": "Example",
"PathDestination": {
"Expression": "",
"Value": "/",
"IsExpression": false,
"Parameters": {}
},
"OrientationLandscape": "",
"PaperSize": {
"Expression": "",
"Value": "A4",
"IsExpression": false,
"Parameters": {}
},
"Grayscale": "",
"OtherOptions": "--javascript-delay 1000",
"StoreFileId": "",
"StoreAbsoluteURL": "link",
"StoreRelativeURL": "",
"StorePhysicalPath": "",
"StoreLinkClick": "",
"ForceDownload": true
},
"$_uid": "action15952466244288115",
"$_isOpen": false,
"$_isLoaded": true,
"$_isFocus": true
},
{
"Title": "Redirect to URL",
"ActionType": "RedirectToUrl",
"Description": null,
"Condition": null,
"Parameters": {
"Url": "[link]",
"EscapeUrl": "",
"OpenInPopup": "",
"PopupTitle": "",
"OpenInNewTab": "",
"ForceDownload": true
},
"$_uid": "action15952466244288030",
"$_isOpen": false,
"$_isLoaded": true,
"$_isFocus": true
}
]
}
}

2. Generate a PDF with pictures/signatures

The action below generates a PDF that has a red title and a loaded picture. This picture can be a signature, a watermark or anything else. Import it into your application to see it in action.

{
"Title": "Execute Actions",
"ActionType": "ExecuteActions",
"Description": "generating a pdf that has a picture",
"Condition": null,
"Parameters": {
"ActionList": [
{
"Title": "Generate PDF",
"ActionType": "GeneratePDF",
"Description": null,
"Condition": null,
"Parameters": {
"HtmlInputType": {
"Expression": "",
"Value": "codemirror",
"IsExpression": false,
"Parameters": {}
},
"HTMLCode": "<head>\n\t<style>\n h1 {\n color: red;\n text-align: center;\n }\n img {\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: 50%;\n }\n\t</style>\n</head>\n\n<body>\n\t<h1> \n Picture \n \t</h1>\n\t<img src=\"https://learn.plantanapp.com/img/pap-logo.png\" alt=\"Plant An App Logo\">\n</body>",
"PDFName": "PDF-Example",
"PathDestination": {
"Expression": "",
"Value": "/",
"IsExpression": false,
"Parameters": {}
},
"OrientationLandscape": "",
"PaperSize": {
"Expression": "",
"Value": "A4",
"IsExpression": false,
"Parameters": {}
},
"Grayscale": "",
"OtherOptions": "--javascript-delay 1000",
"StoreFileId": "",
"StoreAbsoluteURL": "link",
"StoreRelativeURL": "",
"StorePhysicalPath": "",
"StoreLinkClick": "",
"ForceDownload": true
},
"$_uid": "action15952510276878309",
"$_isOpen": false,
"$_isLoaded": true,
"$_isFocus": true
},
{
"Title": "Redirect to URL",
"ActionType": "RedirectToUrl",
"Description": null,
"Condition": null,
"Parameters": {
"Url": "[link]",
"EscapeUrl": "",
"OpenInPopup": "",
"PopupTitle": "",
"OpenInNewTab": "",
"ForceDownload": true
},
"$_uid": "action15952510276874502",
"$_isOpen": false,
"$_isLoaded": true,
"$_isFocus": true
}
]
}
}
Last updated on by Patrick Anderson