PDF.js Viewer Shortcode

Below, you’ll find a detailed guide on how to add the PDF.js Viewer Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the PDF.js Viewer Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the PDF.js Viewer Plugin and the shortcodes it provides:

PDF.js Viewer

"PDF.js Viewer is a powerful WordPress plugin. It allows users to easily embed PDF files directly within posts, pages or custom post types using a simple shortcode. It's user-friendly and efficient."

★★★★✩ (45) Active Installs: 20000+ Tested with: 6.1.4 PHP Version: 7.2

Included Shortcodes:

• [pdfjs-viewer]

PDF.js Viewer [pdfjs-viewer] Shortcode

The pdfjs-viewer shortcode is a powerful tool for embedding PDFs into your WordPress site. It sets up a PDF viewer with customizable attributes like height, width, and zoom level. The shortcode also allows for user interactions such as fullscreen viewing, downloading, and printing. It’s a handy solution for displaying PDF files without requiring users to leave your page.

Shortcode: [pdfjs-viewer]

Parameters

Here is a list of all possible pdfjs-viewer shortcode parameters and attributes:

• url – Specifies the location of the PDF file to be displayed.
• viewer_height – Sets the height of the PDF viewer.
• viewer_width – Sets the width of the PDF viewer.
• fullscreen – Enables or disables the fullscreen option.
• fullscreen_text – Defines the text for the fullscreen button.
• fullscreen_target – Determines if fullscreen opens in a new window.
• download – Enables or disables the download option for the PDF.
• print – Enables or disables the print option for the PDF.
• openfile – Determines if the PDF opens automatically.
• zoom – Sets the initial zoom level of the PDF viewer.
• attachment_id – Identifier for the PDF if it’s an attachment.

Examples and Usage

Basic example – A simple usage of the ‘pdfjs-viewer’ shortcode to display a PDF viewer on your page or post.

[pdfjs-viewer url="http://example.com/path-to-your.pdf" /]

Advanced examples

Using the shortcode to display a PDF viewer with a specific height and width. In this case, the viewer’s height is set to 600px and width to 80% of the container.

[pdfjs-viewer url="http://example.com/path-to-your.pdf" viewer_height="600px" viewer_width="80%" /]

Using the shortcode to display a PDF viewer with custom fullscreen text and disabled download and print options. This can be useful for protecting sensitive documents.

[pdfjs-viewer url="http://example.com/path-to-your.pdf" fullscreen_text="Click here for Fullscreen" download="false" print="false" /]

Using the shortcode to display a PDF viewer with a specific zoom level and an open file option. This allows users to open the PDF in a new tab or window.

[pdfjs-viewer url="http://example.com/path-to-your.pdf" zoom="page-width" openfile="true" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [pdfjs-viewer] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'pdfjs-viewer', 'pdfjs_handler' );

Shortcode PHP function:

function pdfjs_handler( $incoming_from_post ) {

	// do not run this code on the admin screens.
	if ( is_admin() || defined( 'REST_REQUEST' ) && REST_REQUEST ) {
		return;
	}

	// set defaults.
	$incoming_from_post = shortcode_atts(
		array(
			'url'               => plugin_dir_url( __DIR__ ) . '/pdf-loading-error.pdf',
			'viewer_height'     => '800px',
			'viewer_width'      => '100%',
			'fullscreen'        => 'true',
			'fullscreen_text'   => 'View Fullscreen',
			'fullscreen_target' => 'false',
			'download'          => 'true',
			'print'             => 'true',
			'openfile'          => 'false',
			'zoom'              => 'auto',
			'attachment_id'     => '',
		),
		$incoming_from_post
	);

	// send back text to replace shortcode in post.
	return pdfjs_generator( $incoming_from_post );
}

Code file location:

pdfjs-viewer-shortcode/pdfjs-viewer-shortcode/inc/shortcode.php

Conclusion

Now that you’ve learned how to embed the PDF.js Viewer Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.