Change background color in PDF viewer using either embed, object or iframe methods

Question

I've been playing around with different methods of displaying PDFs with the goal of finding a way of changing the grey background to white.

Here is a simple example using object tags (I get the same result with embed and iframe tags):

http://jsfiddle.net/5CALy/7/

HTML

  <object data='https://dl.dropboxusercontent.com/u/58922976/test.pdf#view=FitH&scrollbar=0&toolbar=0&statusbar=0&messages=0&navpanes=0' 
        type='application/pdf' 
        width='84%' 
        height='110px'>

<p>It appears your Web browser is not configured to display PDF files. 
No worries, just <a href='https://dl.dropboxusercontent.com/u/58922976/test.pdf'>click here to download the PDF file.</a></p>
</object>

Thanks!!

Answer 1

The OP Link actually now succeeds by default, here is the view of requesting no pdf where response is with image on white background https://dl.dropboxusercontent.com/u/58922976/test.pdf

However it is normal to use a dark or light presentation background for images PowerPoints pdf other viewing

It is entirely up to the viewer

This browser only opens files in external mode

Or why not rainbow friendly?

But for the answer, ask users to do it themselves

For Firefox users there is a hack see How can I enable dark mode when viewing a pdf file in firefox https://stackoverflow.com/a/74564207/10802527

Answer 2

You can but cannot!

I mean, Every browser (Chrome, Edge, Firefox, Safari, etc.) use their own PDF engine for displaying embedded PDF Files. You can use JavaScript or jQuery to detect the element which has the grey color and change it to white but you'll have to do this for every browser available in the market which is nearly impossible. Moreover, Web Browsers do not provide you an API for this.

The only better solution for this is to make your own PDF Viewer: You can use this https://mozilla.github.io/pdf.js/ opensource package (By Mozilla) to get it done.

Welcome!