Eleventy Plugin: PDFEmbed

This is an Eleventy plugin that creates a shortcode for Adobe's PDF Embed API. The PDF Embed API creates a web-based PDF viewer that gives you more control over the PDF experience in the browser compared to the built-in browser renderer. You can control the size, layout, and more using the API. (See the online demos for examples.)

In order to use this plugin, you must create a free set of credentials first.

Usage

To add the plugin to your Eleventy site, first install it:

npm i eleventy-plugin-pdfembed

Then add it to your .eleventy.js:

const pluginPDFEmbed = require('eleventy-plugin-pdfembed');

module.exports = (eleventyConfig) => {

	// more stuff here

	eleventyConfig.addPlugin(pluginPDFEmbed, {
		key: '<YOUR CREDENTIAL KEY>'
	});


}

Inside your templates, you can then use the shortcode like so:

{% pdfembed 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' %}

The plugin requires, at minimum, the URL to your PDF document. It supports two additional parameters now. The first is mode, which defines how the PDF is embedded on the page. See the online demo for examples. Valid values are:

• FULL_WINDOW (default)
• SIZED_CONTAINER
• IN_LINE
• LIGHT_BOX

For example:

{% pdfembed 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' 'LIGHT_BOX' %}

The third argument lets you customize the ID value used for the div tag. By default this is adobe-pdf-view, but you can set this to any valid ID:

<style>
#pdfdemo {
    width: 500px;
    height: 500px;
}
</style>

{% pdfembed 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' 'IN_LINE' 'pdfdemo' %}

History

Feb 2, 2023 (1.0.2) - updated the script tag to use the modern viewer.