Skip to main content

This example demonstrates how to embed an PDF file into an HTML document.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
  /*
    --------------------------------------------------------------------------
      Embeded PDF styles
    --------------------------------------------------------------------------
  */

  /* make pdf viewer height stretch to 100% of the containing element,
    all parent elements must have their height set to 100%.
    https://stackoverflow.com/a/8473234 */
  html,
  body,
  .container,
  object {
    height: 100%;
  }

  object {
    width: 100%;
  }

  /*
    --------------------------------------------------------------------------
      Page specfic styles
    --------------------------------------------------------------------------
  */

 pre {
  background-color: #ccc;
  border: 1px solid #999;
 }

</style>
</head>
<body>
  <header>
    <h1>Embeded PDF using the <code>&lt;object&gt;</code> Tag <small>(Standard markup, no JavaScript)</small></h1>

    <blockquote>
      <p>
        Unlike <code>&lt;embed&gt;</code>, the <code>&lt;object&gt;</code> element
        enables you to leave fallback content if the browser doesn't support PDF
        embedding. All browsers support the <code>&lt;object&gt;</code> element,
        however, there are often discrepancies in how it has been implemented in each
        browser. Be sure to throughly test your page(s) across browsers and operating
        systems if you use the <code>&lt;object&gt;</code> element. - <a href="https://pdfobject.com/static/" rel="external">Embedding PDFs without using JavaScript</a>
      </p>
    </blockquote>

    <h2>Code</h2>
    <pre>
      <code>
        &lt;object data=&#x27;example_1.pdf#page=1&amp;view=FitB&amp;scrollbar=0&amp;toolbar=1&amp;pagemode=bookmarks&amp;statusbar=0&amp;messages=1&amp;navpanes=1&#x27; type=&#x27;application/pdf&#x27;&gt;
          &lt;p&gt;
            This browser does not support inline PDFs. Please download the PDF to view it:
            &lt;a href=&quot;example_1.pdf&quot;&gt;Download PDF&lt;/a&gt;
          &lt;/p&gt;
        &lt;/object&gt;
      </code>
    </pre>
  </header>

  <div class="container">
    <h2>Example</h2>
    <p>Options configured using the <a href="https://pdfobject.com/generator/">PDFObject.js Code Generator</a>.</p>

    <object data='example_1.pdf#page=1&view=FitB&scrollbar=0&toolbar=1&pagemode=bookmarks&statusbar=0&messages=1&navpanes=1' type='application/pdf'>
      <p>
        This browser does not support inline PDFs. Please download the PDF to view it:
        <a href="example_1.pdf">Download PDF</a>
      </p>
    </object>
  </div>
</body>
</html>