🍉 Meet Flexmonster Pivot Table & Charts 2.9.Check out all hot features!
Get Free Trial

Add table in header while exporting to PDF

Resolved
Ravi Kumar 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

4 answers

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster 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

Public
Ravi Kumar 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

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster 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:
 

  1. Pre-adjust the HTML element’s size so that it can be placed on the page with no issues.
  2. Change the exported page format so that it is large enough for the HTML content to be displayed (see pageFormat option of exportTo() API call).

 
We hope this helps.
 
Best regards,
Mykhailo

Public
Ravi Kumar December 30, 2020

Hi Mykhailo,
 
Thanks for the response.
I have tried an alternative solution, and working for our requirement.
 
Regards,
Ravi Kumar

Please login or Register to Submit Answer