0

I am going through plotly dash examples, and for the vanguard example(link), it's not showed properly in my chrome browser: the bottom part of each page is missing. And if I click the "PRINT PDF" button on the top right and choose "save to pdf", the file has the same issue. A snapshot of the pdf is:

enter image description here

The format looks ok if I switch to IE browser, but when I click the "PRINT PDF" button and choose "Microsoft Print to PDF", the output file does not have background color:

enter image description here

I am not sure how to fix this problem, and could anyone help me with this please? Many thanks!

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
cone001
  • 1,143
  • 3
  • 13
  • 15
  • i couldn't find source code for that app. it's also not on dash's gallery. i just want the code to save dash report to a pdf or would like to know how this could be implemented. – Naveen Reddy Marthala Dec 13 '19 at 05:57

2 Answers2

0

What's the version of your chrome browser? I try to view the pdf file on my side(Chrome version: 71.0.3578.98 (Official Build) (64-bit)), it seems like everything works well, the result like this, and when click the print button, the preview result like this.

As for the background color missing error in the IE browser. Please try to print the pdf file using Chrome or Firefox, then, verify whether the background color missing or not.

If the background color not missing, perhaps the issue is related to the IE browser setting. You could try to turn on the Print background Colors and Images option.

If the background color also missing in Chrome and Firefox, you might need to check the CSS style. You can refer this thread.

Edit: Besides, I think you could also check the page paper setting.

Zhi Lv
  • 18,845
  • 1
  • 19
  • 30
0

I resolved this by adding the below media query to your css file:

@media print
   html, body {
       -webkit-print-color-adjust: exact;
    }
Jon Brown
  • 1
  • 1