How do I remove black div, border and center header/footer on PDF export?

posted on March 18th, 2019

Answered

Jon asked on March 18, 2019

Hello,

I'm having an issue (on Chrome, at least) with my test pdf exports:
1) There's a weird black box to the right of the header and footer div
2) There's a border around the header and footer that I want to remove
3) I need to use the "landscape" page orientation and center the header and footer, but it looks like I can't even widen the divs for the header or footer?
Please refer to the attached images for the current state of the header property on the exported PDF and the configuration in my code. Are there any solutions for my problems?
Thanks for your time!

Attachments:
pdf_export_settings.png
pdf_header_example.png

10 answers

Public

Jon ⋅ March 18, 2019

Hell again,
I also just tested in Edge and the exported pdf has my same black box, border and widening issue.
Just to share a bit more information.

Public

Jon ⋅ March 18, 2019

Last little tidbit,
I'm using the Angular implementation for this. And would this have anything to do with some buried local CSS somewhere? And if so, any ideas of where I should look?
Ok, that's the last of my immediate questions! Thank you so much!

Public

Dmytro Zvazhii ⋅ Flexmonster ⋅ March 18, 2019

Hello Jon,
Thank you for your questions.

We have looked through your code example and prepared a JSFiddle: https://jsfiddle.net/flexmonster/45e9k4c1/228/.
Our team has not managed to reproduce the issue on the provided JSFiddle. The header looks centered both on Chrome and IE.

As for local CSS, that could influence the export process from the outside. Could you please modify the CSS area of JSFiddle to reproduce the issue?

Also, please make sure that you are using the latest version of the component since we have recently updated html2canvas library to resolve a similar issue. Please check that the library folder is also updated. In case of any questions, you can always refer to our "Updating to the latest version" section.

Please let us know if the information above was helpful for you.
Regards,
Dmytro

Public

Jon ⋅ March 21, 2019

Hi Dmytro,
I tried your suggestions and they still come out incorrectly. I do have a couple clarifications and some new information, however:

I'm using the Angular framework implementation (ng-flexmonster) for my project.
On a whim, I downloaded the example Angular project you guys have listed in your documentation (the GitHub project: https://github.com/flexmonster/pivot-angular) just to see if I can reproduce the issue. I did so and I can see that the issue is the same even in the sample (the attached images are from the sample project downloaded onto my local computer using Adventure Works data).

Is this more of an Angular-specific problem? I need it to not have that fixed width, border (you can bare see that there's a light grey border, but it's there!) and stuff and to instead act the same as the generic demo does.
Thank you for your help!
Jon

Attachments:
angular_sample_pdf.png
pdf_sample_html.png
pdf_sample_typescript.png

Public

Jon ⋅ March 21, 2019

To clarify, I can get rid of the black box, which seemed to be rooted in some "position: flex"-es that we had on the page outside of the fm-pivot. The remaining issue now, I guess, is that that red circled area is fixed to the upper-left part of the page. As an example, see what happens when I slap a "<div style='text-align:center;>'" around the header declaration for "HEADER HEADER HEADER" (attached image, upper left corner).
I hope this clarified the issue a bit more. Thanks!
Jon

Attachments:
angular_sample_pdf2.png

Public

Vera Didenko ⋅ Flexmonster ⋅ March 26, 2019

Hello, Jon,

Thank you for your reply.
We are glad to hear that you managed to solve the problem with the black box.

Regarding the header and footer issue, we managed to reproduce it on our side as well.
We will take a more detailed look at the problem and possible fix, and notify you about the result on the 22nd of April.

Please let us know if you have further questions.

Best Regards,
Vera

Public

Jon ⋅ March 26, 2019

Hi Vera,

Thanks for the notification on a possible fix. I just noticed that the issue seems to extend to the legend/legend container when exporting the chart via PDF as well (another attached image). My company is really banking on the PDF export capabilities of the Flexmonster tool, therefore its a relief to hear that a possible fix is in the works. As you guys are going through and evaluating, please let me know if there is a workaround that I can put in place for these.

Thanks for the support!
Jon

Attachments:
angular_chart_legend_export.png

Public

Vera Didenko ⋅ Flexmonster ⋅ March 28, 2019

Hello, Jon,

Thank you for the update and for sending us a screenshot demonstrating the problem.
We will take this issue into consideration as well.

A temporary workaround is to use the print option instead.
You can export to PDF from there as well.
With the print data option, you can also define your header and footer.

Please consider the following example:

var options = {
    header:"<div>##CURRENT-DATE##</div>",
    footer:"<div>##PAGE-NUMBER##</div>"
}
flexmonster.print(options);

Here is our print data from pivot grid guide for more details.

Please let us know if this works for you and if you have further questions.

Best Regards,
Vera

Public

Vera Didenko ⋅ Flexmonster ⋅ April 26, 2019

Hello, Jon,

We are glad to inform you that the issues with the pdf export are now resolved.
The fix is available on our website.

You are welcome to update the component.

Please let us know if everything works fine for you.

We are looking forward to hearing from you.

Best Regards,
Vera

Public

Jon ⋅ April 27, 2019

Hi Vera,

This is great! The PDF exports are coming out just the way we want them, thank you!

Sincerely,
Jon

How do I remove black div, border and center header/footer on PDF export?

10 answers

Please login or Register to Submit Answer