asked on December 30, 2020
Hello, I'm trying to add a page two on my pdf export with a disclaimer text.
Now, I'm not having trouble adding the page two, and adding text to this page, but my problem is that my disclaimer text is an html string. I have tried to use jsPDF's html function, but I am getting a really weird result, as demonstrated in the attached file. You can see my exportTo code here:
vm.flexMonsterInstance.exportTo(
"pdf",
{
destinationType: "plain",
header: vm.getExportHeaderMarkup(),
pageOrientation: orientation,
pageFormat: size,
footer:
"<table style='width:100%;float:left;margin-top:10px;'><tr>" +
"<td style='font-size:12px;'>" +
window.oxygen.translations.exportGenerated +
" ##CURRENT-DATE##</td>" +
"<td style='font-size:12px;text-align:right;'>" +
window.oxygen.translations.exportPage +
" ##PAGE-NUMBER##</td>" +
"</tr></table>",
},
function (res) {
var pdf = res.data;
const filename = res.filename;
var htmlWrapper = document.createElement("DIV");
htmlWrapper.innerHTML = vm.reportTexts.disclaimer;
pdf.html(htmlWrapper, {
callback(doc) {
doc.addPage();
doc.save(filename);
},
x: 10,
y: 10,
});
⋅ December 31, 2020
Hello,
Thank you for reaching out to us.
It seems the issue appears because the disclaimer is added before a new page is created.
We suggest swapping these actions to avoid this behavior, as demonstrated in the following example: https://jsfiddle.net/flexmonster/pewbgk36/.
Please let us know if it works for your case.
Feel free to contact us in case other questions arise.
Regards,
Illia
⋅ January 3, 2021
Thank you, that did it 🙂
⋅ January 3, 2021
Hey Illia, I have one issue wit this solution. The markup I'm exporting includes a link. But when I export it, the link turns into some blue text without the link.
⋅ January 4, 2021
Hello,
Thank you for your feedback.
Concerning the issue with links, we want to explain that jsPDF does not support exporting hyperlinks using the fromHTML method. More details can be found in the corresponding issue opened on the official jsPDF GitHub.
We suggest using alternative solutions to add the link to the exported file.
For example, use the textWithLink API call. We have complemented the example provided earlier to demonstrate the usage of this method.
Please note that Flexmonster uses the jsPDF library only to perform the export. For more information about the jsPDF functionality, please refer to the corresponding documentation.
We hope it helps.
Please contact us if other questions arise.
Regards,
Illia
⋅ January 4, 2021
I see, that is why, I initially wanted to use .html() instead of fromHTML, but I cannot make it work with flexmonster. Do you have any insight? what version of jsPDF is integrated with?
⋅ January 4, 2021
Hello,
Thank you for the additional details.
Flexmonster uses version 1.5.3 of jsPDF library.
If you prefer to use the html() method, the disclaimer's exact coordinates need to be specified:
pdf.html(htmlWrapper, {
callback(doc) {
doc.save(filename);
},
x: 10,
y: 300
});
It means you need to calculate the coordinates of the second page and render the disclaimer there.
However, it seems the html() method does not resolve the problem with links. Please see the JSFiddle for reference.
We have also prepared a sample without Flexmonster to make sure our component does not produce this issue.
We suggest referring to jsPDF documentation/forum to find an appropriate approach for your case.
Please contact us if other questions arise.
Regards,
Illia