PDF.js Viewer
Incorporate Mozilla’s PDF.js 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. Features: Gutenberg Block and Shortcode Elementor Widget (auto-detects when Elementor is active) Translation Support (pl
About this tool.
Incorporate Mozilla’s PDF.js 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.
Features:
- Gutenberg Block and Shortcode
- Elementor Widget (auto-detects when Elementor is active)
- Translation Support (plugin only): Spanish and French included, ready for more languages
- Elegant Theme that adapts to dark and light mode (if browser supports dynamic CSS)
- Customizable buttons
- Page navigation drawer
- Search functionality
- Protected PDF password entry
- Loading bar & displays partially loaded PDF (great for huge PDFs!)
- Document outline
- Classic Editor: Easy to use editor media button that generates the shortcode for you
- Support for mobile devices
- Responsive design with mobile support
Shortcode Syntax:
[pdfjs-viewer attachment_id=123 viewer_width=600px viewer_height=700px fullscreen=true download=true print=true]
Or use a direct URL:
[pdfjs-viewer url=http://www.website.com/test.pdf viewer_width=600px viewer_height=700px fullscreen=true download=true print=true]
Shortcode Parameters:
- attachment_id (recommended): ID of the media file in WordPress media library
- url (alternative): Direct URL to PDF file. Use attachment_id when possible for better security.
- viewer_width (optional): Width of the viewer (default: 100% )
- viewer_height (optional): Height of the viewer (default: 800px )
- fullscreen (optional): true / false , displays fullscreen link above viewer (default: true )
- fullscreen_text (optional): Text for the fullscreen link (default: View Fullscreen ) Spaces not allowed. Use %20 in place of spaces.