Display PDF within web browser

Question

How can I display a pdf within a web browser on an  html page

User · Answer

You can use the  lt embed gt  tag with the source of the file in the src attribute  This uses the native browser PDF viewer   lt embed src  quot your pdf src quot  style  quot position absolute  left  0  top  0  quot  width  quot 100  quot  height  quot 100  quot  type  quot application pdf quot  gt   Live example   x000D   x000D   lt embed src  https   www w3 org WAI ER tests xhtml testfiles resources pdf dummy pdf  style  position absolute  left  0  top  0   width  100   height  100   type  application pdf  gt  x000D   x000D   x000D   Loading the PDF inside a snippet won t work  since the frame into which the plugin is loading is sandboxed  Tested in Chrome and Firefox  See it in action

User · Answer

I recently needed to provide a more mobile-friendly  responsive version of a  pdf document  because narrow phone screens required scrolling right and left a lot  To allow just vertical scrolling and avoid horizontal scrolling  the following steps worked for me    Open the  pdf in Chrome browser Click Open with Google Docs Click File   Download   Web Page Click on the downloaded document to unzip it Click on the unzipped HTML document to open it in Chrome browser Press fn F12 to open Chrome Dev Tools Paste copy document documentElement outerHTML replace  padding 72pt 72pt 72pt 72pt        replace  margin-right    pt g       into the Console  and press Enter to copy the tweaked document to the clipboard Open a text editor  e g   Notepad   or in my case VSCode  paste  and save with a  html extension    The result looked good and was usable in both desktop and mobile environments

User · Answer

You  can also have this simple GoogleDoc approach    lt a  style  color  green   href  http   docs google com gview url http   domain  docs  lt  php echo  row  docname      gt   target   blank  gt View lt  a gt    This would create a new page for you to view the doc without distorting your flow

User · Answer

You can use this code    lt embed src  http   domain com your pdf pdf  width  600  height  500  alt  pdf  pluginspage  http   www adobe com products acrobat readstep2 html  gt    Or use Google Docs embeddable PDF viewer    lt iframe src  http   docs google com gview url http   domain com your pdf pdf amp embedded true   style  width 600px  height 500px   frameborder  0  gt  lt  iframe gt

User · Answer

We render the PDF file pages as PNG files on the server using JPedal  a java library   That  combined with some javascript  gives us high control over visualization and navigation

User · Answer

Displaying content saved in PDF DOC DOCX file format is ideal for displaying the pdf doc docx file on your web page

User · Answer

You can also embed using JavaScript through a third-party solution like PDFObject

User · Answer

The simplest way is to create an iframe and set the source to the URL of the PDF    ducks mad HTML designers  Done it myself  works fine  cross browser  crawls into bunker

User · Answer

The browser s plugin controls those settings  so you can t force it  However  you can do a simple  lt a href  whatver pdf  gt  instead of  lt a href  whatever pdf  target   blank  gt

User · Answer

Have you tried using a simple img tag    lt img scr  https   www typomania co uk pdfs lipsum pdf  gt

User · Answer

preffered using the object tag   lt object data  http   website com nameoffolder documentname pdf toolbar 1           type  application pdf           width  100            height  700px  gt    note that you can change the width and height to any value you please visit http   www w3schools com tags tag object asp

User · Answer

instead of using iframe and depending on the third party think about using flexpaper  or pdf js   I used PDF js  it works fine for me  Here is the demo

User · Answer

As long as you host the PDF the target attribute is the way to go  In other words  for relative files  using the target attribute with  blank value will work just fine     lt e gt     lt a target   blank  alt  StackExchange Handbook  title  StackExchange Handbook       href  pdfs StackExchange Handbook pdf  gt StackExchange Handbook lt  a gt    For absolute paths engines will go to the Unified Resource Locator and open it their  So  suppress the target attribute    lt e gt     lt a alt  StackExchange Handbook  title  StackExchange Handbook       href  protocol   url StackExchange Handbook pdf  gt StackExchange Handbook lt  a gt    Browsers will make a rely good job in both cases

User · Answer

The simple solution is to put it in an iframe and hope that the user has a plug-in that supports it    I don t  the Acrobat plugin has been such a resource hog and source of instability that I make a point to remove it from any browser that it touches    The complicated  but relative popular solution is to display it in a flash applet

User · Answer

I use Google Docs embeddable PDF viewer  The docs don t have to be uploaded to Google Docs  but they do have to be available online    lt iframe src  http   docs google com gview url http   path com to your pdf pdf amp embedded true   style  width 600px  height 500px   frameborder  0  gt  lt  iframe gt

[html] Display PDF within web browser

Examples related to html

Examples related to pdf

Examples related to browser