Hi,
It is important to note that printing a PDF using the @journeyapps/pdf-reports package essentially takes provided HTML and prints it to PDF in the same manner that a browser would if the print function has been invoked.
- Our developer is not sure how to correctly incorporate a Journey asset image into the header of a PDF**
The app asset links mentioned here would not work since the provided HTML is not linked to the application. Any required resources need to either be embedded into the HTML via base64 encoding or referenced via external URLs for the “browser” to fetch.
CloudCode does not have access to the application code or assets folder. This unfortunately means the images would need to be duplicated and stored in the task folder or moved to a DB model attachment field.
Reading base64 from files
Upload the image files to the CloudCode task under a resources folder.
It is then possible to read the files using fs, convert to base64 and insert into the html using a template library such as Handlebars.
const fileData = 'data:image/png;base64, ' + fs.readFileSync(__dirname + '/resources/nice_image.png').toString('base64');
data.images = {
"nice_image": fileData
};
The Handlebars template would then reference the base64 in the data set:
<img src="{{images.nice_image}}" />
Using DB attachments
Create a model for report resources
<model name="pdf_resource" label="PDF Resource">
<field name="handle" label="Handle" type="text" />
<field name="file" label="File" type="attachment" media="any" />
<display>{handle}</display>
</model>
Create objects in the backend and upload the images to the file field.
In the CloudCode task you can fetch the urls from the attachments.
const imageAttachment = await DB.pdf_resource.first('handle = ?', 'nice_image');
data.images = {
'nice_image': imageAttachment.file.url()
}
The Handlebars template would then reference the URL in the data set:
<img src="{{images.nice_image}}" />
- Our developer is having trouble with imprinting the PDF document correctly to span multiple pages.
Printing html to “paper” pages in PDF format can be controlled using CSS features. A good guide is to reference this article. The section Page Breaks should relate to your question. There are many options to take when considering page breaks. The simplest solution would be to add a CSS class to the table in question:
.nice_table * {
page-break-inside: avoid;
}
<table class="nice_table">
...etc
See the box-decoration-break property in regard to borders.
- Our developer is having trouble with implementing dynamic inclusion/exclusion of rows onto the PDF depending on the presence of underlying data
This can be solved using the Handlebars template library. Handlebars supports conditional rendering helper functions.
If your images are stored in the DB then you can add them to your data object
const images = await form.images.toArray();
data.images = images.map(image => {
if (image.file.present()) {
return {url: image.file.url()};
} else {
return {url: null};
}
})
Then in the HTML you can include a matching number of rows from the images
<table class="nice_table">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
{{#each images}}
{{#if url}}
<tr><td><img src="{{url}}" /></td></tr>
{{/if}}
{{/each}}
</table>
- Does the journey platform support Jquery?
The HTML provided to the printer service is rendered by a browser which does support scripting DOM manipulation. The JQuery library would have to be included via a script tag in the HTML. All DOM manipulation should be completed before the window load event is triggered - as the printer will print the DOM contents once the load event is fired.
A basic example of using JQuery is shown below
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', event => {
$('#target').html('Inserted from JQuery');
})
</script>
​</head>
​<body>
<p id="target"></p>
​</body>
Please note that the use of Handlebars and CSS can often provide more eloquent reporting solutions compared to using JQuery.
As a side note:
Note that almost all the above advice (apart from the JQuery) is implemented by default or made easily possible when creating a PDF report task using the RocketPDF tool. This tool provides a quick setup for all your custom CSS (including printer classes by default), data collection and PDF development.
