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

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!