0

I am getting the pdf URL from an API which needs to be shown in an iframe. The pdf is getting loaded but it is taking the background color as black (probably the default browser color). Tried adding allowtransparency="true" style="background-color: Snow" but this applies to the iframe and not on the background of the file. Here's my code: <iframe src={urlOfPdfFile + "#toolbar=0"} width={'100%'} /> enter image description here

Bibek Karna
  • 41
  • 4

1 Answers1

0

The background colour has nothing to do with the web page. It is usually hardcoded in the viewer Thus it can be white, grey, black or in my case when iFrame is using extension a gradient tricolor (red white and blue or when patriotic green white and gold) So you need to use the API of the PDF viewer. Or use a TamperMonkey.

enter image description here

Otherwise the default is most often the default white with security message for when you must right click to externalise the content of the frame to view it.

enter image description here

K J
  • 8,045
  • 3
  • 14
  • 36
  • Thanks for the suggestion. Then it seems that this can't be changed with CSS as it has nothing to do with the webpage (in my case I was showing that in a popup). I tried using the react-pdf to show but as pdf is received from a URL, the package had some issues and it was giving CORS so couldn't complete that way. – Bibek Karna Apr 14 '22 at 16:23