Search code examples
react-pdf

Render PDF in browser without gray background

How is react-pdf's repl (https://react-pdf.org/repl) able to render the PDF without a gray background that you typically see?

When I inspect source on what is being rendered it doesn't seem to be a PDF unless I'm mistaken. What's going on here? and how can I create the same experience on my own site?

I'm looking for guidance or documentation that explains how to render a PDF without a frame with the gray back drop that you normally see.

Solution

  • Contrary to what you may be lead to think, a PDF cannot be viewed in a HTML page. So if "online" it needs either download to a binary decompiler OR artificial conversion into text and images (also not real html, they are downloaded and "framed as frameless").

    Select the text, and you will see there are two layers.

    enter image description here enter image description here

    So you can set the "online" HTML background whatever way the HTML viewer is defined by either background or overlay. Some users will use a Tamper Monkey or an injected script.

    enter image description here

    Clearly such methods can not work with those browsers (The majority) based on a framed binary viewer such as Foxit/PDFium or Acrobat(Edge) in Chromium based browsers. There is no HTML or Web JavaScript access involved there whatsoever.