Mike Doherty

<h3>Basic use</h3>
<p>To embed a PDF you’ve uploaded to your WordPress site’s media<br />
library, simply put the URL for the attachment page in your<br />
post on its own line. The PDF will be embedded with the<br />
default settings at that location, as if it were using oEmbed.</p>
<h4>Examples:</h4>
<pre><code>Post short URL:

http://localhost/?p=9

Attachment default URL:

http://localhost/?attachment_id=9

Attachment pretty URL:

http://localhost/test/report1/

Media direct URL:

<p><a href="http://localhost/wp-content/uploads/2013/11/report1.pdf" target="_blank" rel="noopener noreferrer nofollow ugc">Click to access report1.pdf</a></p>
</code></pre>
<p>This doesn’t work for PDFs hosted on other websites, or if you<br />
need to change the parameters.</p>
<h3>Using the <code>[pdf]</code> shorttag</h3>
<p>If the PDF isn’t in your WordPress site’s media library, or if<br />
you want to customize any parameters for the embed, then use<br />
the <code>[pdf]...[/pdf]</code> shorttag. Between the tags, you’ll provide<br />
the URL for the PDF to embed. If the PDF is in your WordPress<br />
site’s media library, you can either give the attachment page<br />
URL, or the URL to the PDF file directly.</p>
<p>The <code>[pdf]</code> shorttag accepts several optional parameters:</p>
<ul>
<li><code>width</code> – sets the width of the frame the PDF is embedded in.<br />
By default, this is set to 100%.</li>
<li><code>height</code> – sets the height of the frame the PDF is embedded<br />
in. By default, this is unset.</li>
<li><code>title</code> – sets the title of the PDF, for use in the fallback<br />
link text.</li>
<li><code>open_params</code> – sets the <a href="https://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" rel="nofollow ugc">PDF open params</a><br />
which control how the PDF file is displayed in the embed frame.<br />
These are poorly supported in browsers.</li>
</ul>
<h4>Examples:</h4>
<pre><code>Post short URL: [pdf width="200px"]http://localhost/?p=9[/pdf]
Attachment default URL: [pdf height="500em"]http://localhost/?attachment_id=9[/pdf]
Attachment pretty URL: [pdf title="Report 1"]http://localhost/test/report1/[/pdf]
Media direct URL: [pdf]http://localhost/wp-content/uploads/2013/11/report1.pdf[/pdf]
Change PDF open params: [pdf open_params="page=10&view=Fit"]http://localhost/?p=9[/pdf]
</code></pre>
<h3>Compatibility</h3>
<p>The PDF should be embedded in the page, with the document scaled so it fills the<br />
embed frame horizontally. Unfortunately, embedding PDFs is not well-supported.</p>
<h4>Auto-loading embedded PDFs</h4>
<p>Unlike with images, web browsers may not automatically download and display<br />
embedded PDFs when the page is loaded. For security reasons, some users prefer<br />
not to allow the PDF plugin to run unless they trust the website the PDF comes<br />
from. This generally leaves a grey rectangle that the user may click on to allow<br />
the PDF to be downloaded and displayed.</p>
<h4>PDF open parameters</h4>
<p>As of v0.0.8, you can set the <a href="https://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" rel="nofollow ugc">PDF open parameters</a><br />
by setting <code>open_params</code> in the shortcode, as shown above. This is unlikely to actually<br />
anything, since PDF open parameters are poorly supported in browsers. But you can try!<br />
Provide the parameters as a query string: <code>page=1&view=Fit</code>. Refer to the Adobe<br />
documentation on what parameters are available.</p>
<h4>Chrome</h4>
<p>The PDF should be scaled/zoomed within the embed frame so that the full<br />
horizontal width of the paper fills the frame. This is <a href="https://code.google.com/p/chromium/issues/detail?id=64309" rel="nofollow ugc">not<br />
supported</a> in<br />
Chrome’s default PDF viewer, so the document will probably be scaled to 100%,<br />
which may either mean the document doesn’t fill the frame, or, more likely, the<br />
document is too wide for the frame, and the right-hand side of the document is<br />
hidden.</p>
<h4>Internet Explorer</h4>
<p>Internet Explorer requires a PDF plugin to render embedded PDFs. Generally,<br />
that’s Adobe Reader. Without such a plugin, the fallback download link will be<br />
used.</p>
<h4>Mobile browsers</h4>
<p>In particular, mobile browsers may show a grey box instead of the embedded PDF,<br />
and will download the file when it is clicked. Other mobile browsers might embed<br />
the PDF, but won’t allow it to scroll.</p>
<h3>Alternatives</h3>
<p>Your best alternative is to <strong>not</strong> embed PDFs. PDFs are bad for many reasons:<br />
not easily indexed by search engines, not easily accessible by readers who use<br />
assistive technologies, poorly supported by web browsers (as seen above) and so<br />
on. They’re just <strong>bad</strong> and you should avoid embedding PDFs if you can.</p>
<p>If you <em>really</em> can’t, then you might consider using another solution like<br />
<a href="https://pdfobject.com/" rel="nofollow ugc">https://pdfobject.com/</a> or <a href="https://mozillalabs.com/en-US/pdfjs/" rel="nofollow ugc">PDF.js</a>.</p>


Vanilla PDF Embed

Embeds PDFs in your pages and posts, without using JS.

Ketan Kanzariya

<p>PDF Embedder – Scrollable allows you to embed PDF files into WordPress pages and posts using a lightweight and scrollable PDF viewer powered by Mozilla PDF.js.</p>
<p>Unlike iframe-based PDF embeds, this plugin provides a clean viewing experience without browser toolbars, sidebars, or unnecessary margins.</p>
<h4>Features</h4>
<ul>
<li>Scrollable PDF viewer</li>
<li>Responsive and mobile-friendly</li>
<li>Custom scale support</li>
<li>Lazy loading support</li>
<li>Dark mode support</li>
<li>Start from custom page</li>
<li>Custom loader spinner</li>
<li>Relative and absolute PDF URL support</li>
<li>Multiple PDF embeds on same page</li>
<li>Lightweight and fast</li>
<li>Powered by Mozilla PDF.js</li>
</ul>
<h4>Shortcode</h4>
<p>Basic Example:</p>
<p>[pes_pdf_scrollable_embed url=”/wp-content/uploads/sample.pdf”]</p>
<p>Advanced Example:</p>
<p>[pes_pdf_scrollable_embed<br />
url=”/wp-content/uploads/sample.pdf”<br />
scale=”2″<br />
height=”100vh”<br />
toolbar=”true”<br />
download=”false”<br />
zoom=”true”<br />
loader=”spinner”<br />
start-page=”5″<br />
lazy-load=”true”<br />
dark-mode=”true”]</p>
<h4>Shortcode Parameters</h4>
<ul>
<li>url</li>
<li>scale</li>
<li>width</li>
<li>height</li>
<li>max-width</li>
<li>max-height</li>
<li>toolbar</li>
<li>download</li>
<li>zoom</li>
<li>loader</li>
<li>start-page</li>
<li>lazy-load</li>
<li>dark-mode</li>
</ul>
<h4>PDF.js Source Code</h4>
<p>This plugin uses Mozilla PDF.js library.</p>
<p>Original uncompressed source code is available here:</p>
<ul>
<li>https://github.com/mozilla/pdf.js</li>
</ul>
<p>PDF.js is licensed under Apache License 2.0.</p>
<h3>License</h3>
<p>This plugin is licensed under GPL-3.0.</p>
<h3>Source Code</h3>
<p>The minified JavaScript libraries used in this plugin are compressed for performance. The original, human-readable source code for these libraries can be found at the following locations:</p>
<ul>
<li><strong>pdf.js</strong>: <a href="https://github.com/mozilla/pdf.js" rel="nofollow ugc">GitHub Repository – Mozilla pdf.js</a></li>
<li><strong>pdf.worker.js</strong>: <a href="https://github.com/mozilla/pdf.js" rel="nofollow ugc">GitHub Repository – Mozilla pdf.worker.js</a></li>
</ul>
<p>If you would like to review or contribute to the development of these libraries, please refer to the repositories above. Any modifications made to these libraries in this plugin will be documented in future versions of the plugin.</p>
<p>Additionally, the source code for the plugin itself is available on our GitHub repository at:<br />
– <strong>Plugin Source Code</strong>: <a href="https://github.com/aurorbyte/pdf-embedder-scrollable" rel="nofollow ugc">GitHub – Aurorbyte PDF Embedder</a></p>
<p>We welcome contributions and feedback from the community. Please submit any pull requests or issues directly to the GitHub repository above.</p>


PDF Embedder – Scrollable

Embed scrollable PDF files in WordPress with customizable scale, lazy loading, dark mode, and responsive support.

Vanilla PDF Embed vs PDF Embedder – Scrollable