i don't know the exact details of why your design involves having child tables in cells but if we only consider the specific layout you are sharing then i can solve the issue by merging the arrays (position and educations into one) and then iterating just single array to fill the cells
the problem is that you are not creating rows correctly
you have this
<td>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
<p class='experienceWrapper'>
{{company}}
</p>
</td>
which is just one big cell in the end, it should be changed to have the p in its own row and td
I think the padding of tbody td was the problem, if I change that selector to td it works again, I have also changed the title and added it inside the table otherwise it does not work, because the unbreakable prevents the table to stay on first page if it encounters another element outside the table
hi!
if i add the following css it works
.unbreakable {
page-break-inside: avoid;
}
https://playground.jsreport.net/w/bjrmatos/RhXrjfNP
the table headers in the example are no longer being duplicated incorrectly
hi @dmt876
function beforeRender(req, res, done) {
var config = require('Configuration.json');
var elasticsearch = require('@elastic/elasticsearch');
var esClient = new elasticsearch.Client({
node: config.esURL,
auth: {
username: config.user,
password: config.password
}
});
// simple test for ES connectivity - fetch cluster health
esClient.cluster.health({},function(err,resp,status) {
console.log("-- Client Health -- resp",resp);
console.log("-- Client Health -- err",err);
console.log("-- Client Health -- status",status);
});
the script in 2.11.0 has two forms, one is based on promises and async/await style, and the other is based on the callback style. to use one form or the other depends on how you define the beforeRender function.
you are currently defining the beforeRender with 3 arguments, which means you are choosing the callback style, and when you use the callback style you need to use that third param done to signal the script that it finished.
for example, I know that your script is longer than just this fragment of code, but I will update it to reflect the usage of the done parameter.
function beforeRender(req, res, done) {
var config = require('Configuration.json');
var elasticsearch = require('@elastic/elasticsearch');
var esClient = new elasticsearch.Client({
node: config.esURL,
auth: {
username: config.user,
password: config.password
}
});
// simple test for ES connectivity - fetch cluster health
esClient.cluster.health({},function(err,resp,status) {
console.log("-- Client Health -- resp",resp);
if (err) {
console.log("-- Client Health -- err",err);
return done(err)
}
console.log("-- Client Health -- status",status);
done()
});
}
you should update the rest of your code to properly call done either with an error or with no param when it is completed
hi! can you please share the example of this case on the playground?
i think there is an easy fix for this but it is much better if you share your template, data in the playground so we can apply the solution directly there.
thanks
i think i have resolved this via email, adding the resolution here just to close the question
your main template is using chrome-pdf, but the page you are appending is using the phantom-pdf recipe, which does not support flexbox and also has other default for the size of pdf page (it is A4 by default), the header/footer you have uses chrome-pdf recipe which has another different page size (i think it is size of Letter page as default in chrome), so when you merge page from chrome with page from phantom-pdf you see that mismatch in the end result.
if I just change the recipe of your inventory-signature.htm to chrome-pdf everything works as expected. (because chrome supports flexbox and it produces the same pdf page size as your other pages)
hmm i can not also figure it out a css only solution, maybe it can not be done because using @page margin is dealing with space outside the html, css context.
hi!
here you can check the limits for each plan of jsreportonline
hi!
I think you can do this to get how much time it took for the current render to get to the afterRender step
function afterRender (req, res) {
const executionTimeMs = new Date().getTime() - req.context.startTimestamp
}
just have in mind that the req.context.startTimestamp represents the start time of the current template, so if somehow the script is attached to a child template it will only give you how much time it tooks that specific child render, as long as you attach this script to your main template you will be able to get the time you expect.