Ask Anvil

Answers to questions about automating PDFs, e-signatures, Webforms, and other paperwork problems.
PDFs
Categories

What is the recommended way to embed a PDF in HTML?

The recommended way to embed a PDF in HTML varies based on the specific use case, compatibility needs, and desired level of control over the viewer. Below are common methods, their advantages, disadvantages, and best practices for each approach.

  • For simple inline embedding, <iframe> is the most compatible and easiest to implement. You'll want to ensure responsive design and cross-browser testing for mobile compatibility.
  • For interactive and customizable experiences, PDF.js is the best option, providing extensive control over rendering and interactivity, though it requires more setup.
  • When simplicity and wide compatibility are priorities, linking directly using an <a> tag with a download link is the most straightforward solution.

1. Using the <iframe> Tag

  • Use Case: Displaying PDFs directly on a page, like embedding manuals, terms of service, or documents that need to be viewed inline.
  • Example:
<iframe src="path/to/document.pdf" width="100%" height="600px"></iframe>
  • Advantages:
    • Simple and widely supported.
    • Easily resizable for responsive layouts.
  • Disadvantages:
    • Limited control over the PDF viewer’s interface (e.g., zoom, print options).
    • May not work consistently in all mobile browsers.
  • Best Practice:
    • Set width="100%" and an appropriate height for responsiveness.
    • Test across browsers to ensure compatibility, particularly on mobile devices.

2. Using the <embed> Tag

  • Use Case: Embedding PDFs within dashboards or reports where inline viewing is required.
  • Example:
<embed src="path/to/document.pdf" type="application/pdf" width="100%" height="600px" />
  • Advantages:
    • Simple to implement, similar to the <iframe> approach.
    • Works well in most modern browsers.
  • Disadvantages:
    • Less flexibility in customizing the viewer appearance.
    • Limited browser support for some mobile devices.
  • Best Practice:
    • Use it for static content where full browser support is expected.
    • Test for browser compatibility, especially if mobile users are a significant portion of your audience.

3. Using the <object> Tag

  • Use Case: Embedding PDFs with a fallback option for unsupported browsers, such as legacy or mobile browsers.
  • Example:
<object data="path/to/document.pdf" type="application/pdf" width="100%" height="600px"> <p>Your browser does not support PDFs. <a href="path/to/document.pdf">Download the PDF</a>.</p> </object>
  • Advantages:
    • Allows for a fallback message or link, improving accessibility.
    • Slightly more customizable than <iframe> or <embed>.
  • Disadvantages:
    • Behavior can be inconsistent across different browsers.
    • Limited functionality in mobile environments.
  • Best Practice:
    • Always provide a fallback link to download the PDF if the browser does not support inline viewing.
    • Ensure the object’s dimensions are properly defined for consistent rendering.

4. JavaScript Libraries (e.g., PDF.js)

  • Use Case: Implementing interactive PDF viewers with full customization, such as adding annotations, zoom controls, or navigation for document management systems.
  • Example:
<canvas id="pdf-render"></canvas> <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script> <script> const url = 'path/to/document.pdf'; const pdfjsLib = window['pdfjs-dist/build/pdf']; pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; pdfjsLib.getDocument(url).promise.then(pdf => { pdf.getPage(1).then(page => { const scale = 1.5; const viewport = page.getViewport({ scale: scale }); const canvas = document.getElementById('pdf-render'); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }); </script>
  • Advantages:
    • Full control over rendering and interactivity, including the ability to add custom controls and features.
    • Works well for both single-page and multi-page PDFs.
  • Disadvantages:
    • More complex to set up and maintain compared to native HTML tags.
    • Requires JavaScript, making it less suitable for environments where JavaScript is disabled.
  • Best Practice:
    • Optimize performance by lazy-loading pages or rendering only the visible portion.
    • Provide a fallback mechanism in case the JavaScript fails to load or is disabled.

5. Using <a> Tag for Direct Download/Display

  • Use Case: Providing users with a link to either download or open the PDF directly in their browser’s native viewer, ideal for document downloads like contracts or reports.
  • Example:
<a href="path/to/document.pdf" target="_blank">View PDF</a>
  • Advantages:
    • Easiest method to implement.
    • Utilizes the browser’s built-in PDF viewer, offering full functionality.
  • Disadvantages:
    • Opens the PDF in a new tab; lacks inline embedding or customization.
    • Does not allow for control over the document presentation within the page.
  • Best Practice:
    • Use this method for simple document access where inline viewing is not required.
    • Always set target="_blank" to open the PDF in a new tab, preserving the original web page.
Back to All Questions
Anvil Logo

The fastest way to build software for documents

Anvil Document SDK is a comprehensive toolbox for product teams launching document flows where PDF filling, signing, and complex conditional scenarios are necessary.
Explore Anvil
Anvil Webforms