asked on December 23, 2020
Hi,
We would like to view some data in PDF export as table format.
Please find the below data.
[{key: 'Job', value: 'India'}, {key: 'Vendor', value: 'SR Steels'}, {key: 'Amount', value: '1000000'}]
Currently we concating all the data and adding in PDF export headers like,
Job: India, Vendor: SR Steels, Amount: 1000000
But we need in table format like in the attachment.
Please provide any solution.
Regards,
Ravi Kumar
⋅ December 24, 2020
Hi Ravi,
Thank you for posting your question.
To achieve the desired behavior you can simply specify an HTML string as the value of the header parameter in your export configurations.
We've prepared a quick sample illustrating this – feel free to check it out: https://jsfiddle.net/flexmonster/b0Lpah9m/.
Please let us know if this helps.
Regards,
Mykhailo
⋅ December 24, 2020
Hi Mykhalio,
Above suggested approach is working for few data items, assume if we need to add more data items then the exported PDF is not looking catchy.
Please try with below data & check the visibility.
function exportPdf() {
var params = {
filename: 'flexmonster',
header: "<table style=\"border: 1px solid black;border-collapse: collapse;\"><tr><td style=\"border: 1px solid black;border-collapse: collapse;\">Job: India</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Vendor: SR Steels</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Amount: 1000000</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Job: India</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Vendor: SR Steels</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Amount: 1000000</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Job: India</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Vendor: SR Steels</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Amount: 1000000</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Job: India</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Vendor: SR Steels</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Amount: 1000000</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Job: India</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Vendor: SR Steels</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Amount: 1000000</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Job: India</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Vendor: SR Steels</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Amount: 1000000</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Job: India</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Vendor: SR Steels</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Amount: 1000000</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Job: India</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Vendor: SR Steels</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Amount: 1000000</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Job: India</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Vendor: SR Steels</td><td style=\"border: 1px solid black;border-collapse: collapse;\">Amount: 1000000</td></tr></table>"
};
flexmonster.exportTo('pdf', params);
}
Please suggest any other solution to export more data in headers.
Regards,
Ravi Kumar
⋅ December 28, 2020
Hi Ravi,
Thank you for your swift response.
Please note that for including custom HTML elements in PDF export, Flexmonster is using the html2canvas tool. More specifically, the provided string is used to render the corresponding HTML element, which is then snapshotted – the resulting image is placed as a header in the exported PDF document.
The component has no way of knowing what this image looks like – therefore, the situations where the image is too large are not handled by Flexmonster.
With that in mind, we would suggest considering the following steps to display a large table correctly:
pageFormat option of exportTo() API call).
We hope this helps.
Best regards,
Mykhailo
⋅ December 30, 2020
Hi Mykhailo,
Thanks for the response.
I have tried an alternative solution, and working for our requirement.
Regards,
Ravi Kumar