How to embed PDFs that work in all web and mobile browsers

27,249

Solution 1

If you give a link to the PDF on the web page, any browser will be able to download the file and then the user can open it in a PDF viewer of his choice.

If you want to embed the PDF document in a web page, then the browser needs to have a PDF plugin installed. This may not be the case with all browsers. The PDF will be displayed only if the PDF viewer application's plugin is registered with the browser.

The other way of embedding the PDF document is to use a server-side component that renders the PDF as ordinary HTML web page elements. Google has an embeddable PDF viewer.

Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. The files don't have to be uploaded to Google Docs, but they need to be available online.

Solution 2

You can also use Mozilla's pdf renderer written in javascript. It is rather complex getting started, but all options are there. It is the pdf reader available in Firefox and extensions exist for other browsers. Fun fact: It is by far the most starred library on github when searching for pdf.

Share:
27,249
Silas Paul
Author by

Silas Paul

I am a Web & Graphic Designer, working in a UK based company for past two years.

Updated on October 17, 2021

Comments

  • Silas Paul
    Silas Paul over 2 years

    My client asked me to create a page which contains PDF. I used Embed, Iframe tags, it worked in Mozilla but did not work in IE and Mobile browser.

    I know that all browsers will read .pdf directly but I want it to be embed.

    Is there any way?

    Please help me..

    • peteorpeter
      peteorpeter almost 13 years
      per @VSU's answer, you can't really embed PDF's like you can images or videos - it's not part of the HTML spec or standard browser implementations. You'll need to convert the pdf to HTML or raster images if you want the content truly integrated into a web page.
  • Admin
    Admin over 2 years
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.