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.

Ben Lawson

Thomas McMahon

<p>Incorporate <a href="https://github.com/mozilla/pdf.js/" rel="nofollow ugc">Mozilla’s PDF.js</a> viewer into your pages and posts via a Gutenberg block or a simple shortcode. PDF.js is a javascript library for displaying pdf pages within browsers.</p>
<p>Features:</p>
<ul>
<li>Gutenberg Block and Shortcode</li>
<li>Elementor Widget (auto-detects when Elementor is active)</li>
<li>Translation Support (plugin only): Spanish and French included, ready for more languages</li>
<li>Elegant Theme that adapts to dark and light mode (if browser supports dynamic CSS)</li>
<li>Customizable buttons</li>
<li>Page navigation drawer</li>
<li>Search functionality</li>
<li>Protected PDF password entry</li>
<li>Loading bar & displays partially loaded PDF (great for huge PDFs!)</li>
<li>Document outline</li>
<li>Classic Editor: Easy to use editor media button that generates the shortcode for you</li>
<li>Support for mobile devices</li>
<li>Responsive design with mobile support</li>
</ul>
<p>Shortcode Syntax:</p>
<pre><code>[pdfjs-viewer attachment_id=123 viewer_width=600px viewer_height=700px fullscreen=true download=true print=true]
</code></pre>
<p>Or use a direct URL:</p>
<pre><code>[pdfjs-viewer url=http://www.website.com/test.pdf viewer_width=600px viewer_height=700px fullscreen=true download=true print=true]
</code></pre>
<p><strong>Shortcode Parameters:</strong></p>
<ul>
<li><code>attachment_id</code> (recommended): ID of the media file in WordPress media library</li>
<li><code>url</code> (alternative): Direct URL to PDF file. Use <code>attachment_id</code> when possible for better security.</li>
<li><code>viewer_width</code> (optional): Width of the viewer (default: <code>100%</code>)</li>
<li><code>viewer_height</code> (optional): Height of the viewer (default: <code>800px</code>)</li>
<li><code>fullscreen</code> (optional): <code>true</code>/<code>false</code>, displays fullscreen link above viewer (default: <code>true</code>)</li>
<li><code>fullscreen_text</code> (optional): Text for the fullscreen link (default: <code>View Fullscreen</code>)
<ul>
<li>Spaces not allowed. Use <code>%20</code> in place of spaces.</li>
</ul>
</li>
<li><code>fullscreen_target</code> (optional): <code>true</code>/<code>false</code>, open the fullscreen link in a new tab (default: <code>false</code>)</li>
<li><code>download</code> (optional): <code>true</code>/<code>false</code>, enables or disables download button (default: <code>true</code>)</li>
<li><code>print</code> (optional): <code>true</code>/<code>false</code>, enables or disables print button (default: <code>true</code>)</li>
<li><code>openfile</code> (optional): <code>true</code>/<code>false</code>, show open file button (default: <code>false</code>)</li>
<li><code>zoom</code> (optional): Initial zoom level – <code>auto</code>, <code>page-actual</code>, <code>page-fit</code>, <code>page-width</code>, or percentage like <code>75</code>, <code>100</code>, <code>150</code> (default: <code>auto</code>)</li>
</ul>
<h3>Elementor Widget</h3>
<p>If you’re using <a href="https://elementor.com/" rel="nofollow ugc">Elementor</a>, the PDF.js Viewer Elementor widget is automatically available in the Page Builder.</p>
<h3>Admin Notice After Updates / Invalid Block</h3>
<p>When you update the plugin, editors may see an admin banner explaining that Gutenberg could show an “Attempt Block Recovery” prompt when editing older posts with PDFs. Clicking it updates the block format; it does not affect what visitors see. You can dismiss the banner, and it won’t reappear until a future release enables it again.</p>
<h3>License</h3>
<p>This WordPress plugin is licensed under GPLv2 or later.</p>
<p>PDF.js (included in this plugin) is developed by Mozilla and licensed under the Apache License 2.0. See the <a href="https://github.com/mozilla/pdf.js" rel="nofollow ugc">PDF.js repository</a> for details.</p>
<h3>3.1.0</h3>
<ul>
<li>Cache busting for the pesky pdf.worker.js file to prevent caching issues after updates</li>
<li>Added Elementor widget</li>
<li>Brought Zoom back</li>
<li>Ability to whitelist other domains (like CDNs) to load PDFs from.</li>
</ul>
<h3>3.0.4</h3>
<ul>
<li>Cache busting for PDF.js files to prevent caching issues after updates</li>
</ul>
<h3>3.0.3.1</h3>
<ul>
<li>URL Encoding fix</li>
</ul>
<h3>3.0.3</h3>
<ul>
<li>PDFjs 5.5.207</li>
<li>Improved URL encoding for PDF files with special characters in filenames/URLs</li>
<li>Enhanced security with better sanitization of file parameters</li>
</ul>
<h3>3.0.2</h3>
<ul>
<li>Added cache busing to PDFjs files to prevent caching issues after updates</li>
</ul>
<h3>3.0.1</h3>
<ul>
<li>Fixed an issue with mjs files on servers that don’t support the mime type</li>
</ul>
<h3>3.0.0</h3>
<ul>
<li>Now requires WordPress 5.0 and PHP 7.4</li>
<li>Upgraded PDFjs to PDF.js 5.4.456</li>
<li>Added PDF preview in Gutenberg block</li>
<li>Admin notice for block recovery after updates</li>
<li>Accessibility improvements.</li>
<li>Reworked the block editor PDF embed code</li>
<li>Options Page improvements.</li>
<li>Added message so if the user is trying to load external PDFs, they’ll get a warning</li>
<li>Translation Support: Added internationalization support
<ul>
<li>Included Spanish (es_ES) and French (fr_FR) translations</li>
<li>Added translation template (POT file) for additional languages</li>
<li>Added <code>load_plugin_textdomain()</code> for automatic translation loading</li>
<li>Created translation guide in <code>languages/README.md</code></li>
</ul>
</li>
<li>Fixed <code>window.pdfjs_options</code> undefined errors in block editor</li>
<li>Added safe fallback to prevent JavaScript errors when options not loaded</li>
<li>Improved attribute default handling in Gutenberg block</li>
<li>Added PDF preview in Gutenberg block editor</li>
<li>Consolidated rendering logic with new <code>pdfjs_render_viewer()</code> function</li>
<li>Created <code>pdfjs_get_options()</code> helper for consistent option retrieval</li>
<li>Added proper input sanitization with <code>pdfjs_sanitize_option()</code></li>
<li>Fixed <code>pdfjs_viewer_scale</code> default from <code>0</code> to <code>auto</code></li>
<li>Updated build toolchain (Sass, webpack, Node 18+ requirement)</li>
<li>Removed unused code and improved code organization</li>
<li>Added <code>.nvmrc</code> for Node version management</li>
<li>Fixed PHP Warning: Undefined array key “editButtons” thanks to retroflexer</li>
<li>Fixed issue where iFrames could break the layout on smaller screens</li>
</ul>
<h3>2.2.3</h3>
<ul>
<li>Updated PDFjs to PDF.js 5.3.93</li>
<li>Merged ‘Add toggle to disable editing buttons’ PR</li>
<li>Merged ‘Fix PHP Warnings: Undefined array key’ PR</li>
<li>Package security updates / rebuild</li>
</ul>
<h3>2.2.2</h3>
<ul>
<li>PDFjs with legacy browser support</li>
</ul>
<h3>2.2.1</h3>
<ul>
<li>.mjs workaround</li>
<li>Updated to PDFjs 4.5.136</li>
</ul>
<h3>2.2</h3>
<ul>
<li>Updated to PDFjs 4.3.136</li>
<li>Renamed ‘Download’ to ‘Save’ based on PDFjs change.</li>
<li>Removed the zoom feature to hopefully fix Edge issues.</li>
<li>Disabling the Alternative PDF Loading version</li>
</ul>
<h3>2.1.8</h3>
<ul>
<li>Preventing users from adding JS to shortcodes.</li>
<li>Bumping version numbers</li>
</ul>
<h3>2.1.7</h3>
<ul>
<li>Fixed the fullscreen settings for new PDFs</li>
<li>Fixing a bug where, on fresh installs, the fullscreen text would be ‘on’</li>
<li>Tested with WordPress 6.0-beta3-53297</li>
</ul>
<h3>2.1.6</h3>
<ul>
<li>Added testing up to WordPress 5.9.</li>
<li>Added a few more variables into the Alternative PDF Loading version.</li>
<li>Moved the Alternative PDF Loading to beta.</li>
</ul>
<h3>2.1.5</h3>
<ul>
<li>Detect ACF before running ACF code.</li>
<li>Beta: Added a feature flag to load the PDF in full screen view differently.</li>
</ul>
<h3>2.1.4</h3>
<ul>
<li>Decoding PDF urls when other plugins encode them in the classic editor.</li>
</ul>
<h3>2.1.3</h3>
<ul>
<li>Adding a version number to some JS files to break caches</li>
<li>Fixing an issue where the fullscreen text didn’t have spaces</li>
<li>Updating the shortcode in the read me</li>
</ul>
<h3>2.1.2</h3>
<ul>
<li>Reverting to the file in the URL</li>
</ul>
<h3>2.1.1</h3>
<ul>
<li>Updating how we call the WordPress plugin directory.</li>
<li>Updating function names.</li>
<li>More sanitization.</li>
</ul>
<h3>2.1.0</h3>
<ul>
<li>Added the file ID to the URL.</li>
<li>Hooked WordPress into the viewer to pull the URL in. Should fix some possible security concerns.</li>
<li>Removed the file URL from the URL.</li>
<li>Removed the <code>pdfjs_set_custom_edits</code> filter.</li>
<li>Removed the <code>pdfjs_set_custom_domain</code> filter.</li>
<li>Sanitizing inputs</li>
<li>Removing search term.</li>
</ul>
<h3>2.0.2</h3>
<ul>
<li>Preventing XSS with the search term</li>
</ul>
<h3>2.0.1</h3>
<ul>
<li>Now works with ACF fields! Thanks @imj13</li>
</ul>
<h3>2.0.0</h3>
<ul>
<li>Major PDFjs Upgrade to version 2.6.347</li>
<li>Changing the insert PDF button to fire on a class not ID.</li>
<li>Updated the minimum version of WordPress supported.</li>
<li>Maybe Edge is happy now?</li>
</ul>
<h3>1.5.9</h3>
<ul>
<li>Fixing the issue that made Edge unhappy. <em>fingers crossed</em></li>
</ul>
<h3>1.5.8</h3>
<ul>
<li>Starting to hook up options page to the shortcode.</li>
<li>Fixing a potential code injection problem</li>
<li>Fix for WordPress 2021 Theme</li>
</ul>
<h3>1.5.7</h3>
<ul>
<li>Fix for those not running WordPress 5+ where a fatal error would show because a function I called didn’t exist.</li>
</ul>
<h3>1.5.6</h3>
<ul>
<li>New options page to set the default settings.</li>
<li>Only showing the ‘Add PDF’ media button to posts using the classic editor as it only works in the classic editor.</li>
<li>Added a filter to pass in a custom domain if URLs are proxied. <code>pdfjs_set_custom_domain</code></li>
<li>Added a filter if you want to edit the PDF URL. <code>pdfjs_set_custom_edits</code></li>
<li>Ability to hide Search via setting on options page.</li>
<li>Ability to show Sidebar via setting on options page.</li>
<li>Ability to highlight a search term on PDF load.</li>
</ul>
<h3>v1.5.5</h3>
<ul>
<li>High Five 🖐</li>
</ul>
<h3>v1.5.4</h3>
<ul>
<li>Reworking way we make the PDF url relative.</li>
</ul>
<h3>v1.5.3</h3>
<ul>
<li>Remove only the first instance of the domain name from the URL. Leave it if it’s in a directory or file name.</li>
</ul>
<h3>v1.5.2</h3>
<ul>
<li>Making the PDF URL relative so that maybe Microsoft Defender won’t complain.</li>
<li>Allowing the viewer to be called directly.</li>
<li>Hiding the Open button.</li>
<li>Checking for <code>register_block_type</code> function before calling it to better support WordPress 4.x. Thanks @Now-Italy-Demo @octoxan</li>
<li>Made the PDF URL relative to hopefully fix Windows Defender security issues.</li>
<li>Adding option to open the fullscreen link in a new tab.</li>
</ul>
<h3>v1.5.1</h3>
<ul>
<li>Reverting the update to Mozilla PDF.JS library as it broke older browsers and some other setups.</li>
</ul>
<h3>v1.5</h3>
<ul>
<li>Updated Plugin Name</li>
<li>Updated Plugin Icon</li>
<li>Gutenberg Block</li>
<li>Updating Mozilla PDF.JS library.</li>
<li>Adding a class to the fullscreen link.</li>
<li>Ability to customize fullscreen link text.</li>
<li>Ability to customize default zoom level.</li>
<li>Classes so you can style things easier.</li>
<li>Shorter default height.</li>
</ul>
<h3>v1.4.6</h3>
<ul>
<li>Renaming URL variables to prevent a possible Edge security message.</li>
</ul>
<h3>v1.4.5</h3>
<ul>
<li>Fixes a version number issue that was introduced in the last version.</li>
</ul>
<h3>v1.4.4</h3>
<ul>
<li>Brings back the ability to hide print and download.</li>
<li>Adds version numbers to URLs to hopefully break caches and prevent weirdness.</li>
</ul>
<h3>v1.4.3</h3>
<ul>
<li>Fixes an issue where PDFs wouldn’t load on production sites due to a <code>setLanguage</code> error.</li>
</ul>
<h3>v1.4.2</h3>
<ul>
<li>Added title to iFrame for accessibility.</li>
<li>Cleaning up code per WordPress standards.</li>
</ul>
<h3>v1.4.1</h3>
<ul>
<li>Updating the Readme</li>
</ul>
<h3>v1.4</h3>
<ul>
<li>Updating to PDF.JS version v2.3.200</li>
<li>Updating the Readme</li>
<li>Adding Gutenberg Callout</li>
</ul>
<h3>v1.0 – 1.3</h3>
<ul>
<li>The birth of the plugin and first few versions.</li>
</ul>


PDF.js Viewer


I was impressed with the level of support provided with the recent issue where the plugin stopped displaying due to Mozilla’s PDFjs, and they started using mjs files.



Thank you for an excellent plugin.


Vanilla PDF Embed vs PDF.js Viewer