Continuous PDF Viewer

Description

Thanks to Imran Siddiq (https://www.youtube.com/@websquadron/). This code was adapted from his PDF Viewer code.

Continuous PDF Viewer is a high-performance, WordPress-native PDF viewer powered by PDF.js. Version 2.1 introduces a completely rebuilt rendering engine optimized for 100% continuous scrolling, bringing a modern, native-app reading experience to your WordPress site.

Key Features

  • Continuous Scroll Engine: Pages stack seamlessly for smooth, vertical reading. Highly optimized sequential rendering prevents browser lag, even on large documents.
  • Smart Page Tracking: An intelligent viewport observer automatically detects which page you are reading and instantly updates the toolbar and sidebar thumbnails as you scroll.
  • Advanced Search & Highlight: Pinpoint search functionality that calculates the exact pixel location of your search terms and smoothly scrolls them directly into the center of your screen.
  • Native Fullscreen Mode: Utilizes the browser’s native Fullscreen API for distraction-free reading, featuring “ scroll memory” to keep your place when entering or exiting fullscreen.
  • Gutenberg Block Integration: A native WordPress block with a click-to-select placeholder UI and seamless Media Library integration.
  • Live Shortcode Generator: A dedicated admin tools page (Tools > Continuous PDF Viewer) that lets you visually configure colors, dimensions, and toolbar features while generating a live shortcode.

Screenshots

  • The Continuous PDF Viewer renderibng a document on the frontend
  • The Gutenberg block for the Continuous PDF Viewer

Blocks

This plugin provides 1 block.

  • Continuous PDF Viewer Embed a continuous scroll PDF viewer.

Installation

Using the Gutenberg Block

  1. Open the WordPress Block Editor.
  2. Search for the “ Continuous PDF Viewer” block.
  3. Click “ Select PDF File” on the canvas to choose a document from your Media Library.
  4. Use the right-hand Inspector Controls to customize the start page, default zoom, sidebar visibility, and colors.

Using the Shortcode

You can place the viewer anywhere using the [continuous_pdf_viewer] shortcode.

Basic Example:
[continuous_pdf_viewer url=” https://yoursite.com/wp-content/uploads/document.pdf” ]

Advanced Example:
[continuous_pdf_viewer url=” /wp-content/uploads/document.pdf” title=” Annual Report” start_page=” 3″ theme=” dark” accent=” #4f7df3″]

Note: Generating complex shortcodes is highly recommended via the built-in Shortcode Generator under the Tools menu.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Continuous PDF Viewer” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

2.1.7

  • Put the “ Pro Tip” on a separate line to make the toolbar more responsive

2.1.6

  • Fix the scale number in the toolbar so it matches the actual zoom level

2.1.5

  • Removed the standard_fonts folder

2.1.4

  • Change prefix used in the code from cpv to cpdfv
  • removed unused files
  • moved inline CSS/JS to use of wp_add_inline_*
  • changed shortcode name to continuous_pdf_viewer

2.1.3

  • switch to latest version of PDF.js (v5.6.205)
  • removed an extra file that didn’t belong
  • removed some !important from the CSS and add a tooltip to the PDF viewer panel
  • fixed some issues with going full screen
  • hide the thumbnail button on mobile
  • hide the sidebar when going fullscreen
  • make the tool tip text into a PDF Viewer setting which can be changed by the user

2.1.1

  • Changed the default height from 600px to 80vh
  • Recalculate the width for each tab when in a page when different pdf viewer blocks are in different tabs.`
  • Set the default heights to 80vh for desktop, 70vh for tablet, and 60vh for mobile rather than a specific px value.
  • wrapped some output in escape_* functions

2.1.0

  • New: Highly-optimized Continuous Scroll engine replaces the legacy single-page view.
  • New: Pressing the Enter key inside the search bar now accurately loops through highlighted results.
  • New: High-DPI (Retina) screen support added to the canvas rendering loop for crystal-clear text.
  • Fix: Replaced legacy CSS flexbox centering to eliminate the “ cut-off top” bug on tall pages.
  • Tweak: Search navigation buttons now visually disable when reaching the first or last search result.
  • Deprecated: The legacy view_mode setting (Single Page vs. Continuous) has been removed.