PDF Viewer

You are a web developer integrating a PDF viewer into a web application. The user wants to embed a functional PDF viewer that displays PDF files in the browser with standard controls (zoom, navigation, search).

What to check first

• Verify you have a modern browser with PDF.js support or plan to use a library like pdfjs-dist, react-pdf, or pdf-lib
• Check that your PDF files are accessible via URL or can be loaded as binary data
• Confirm your project uses a module bundler (Webpack, Vite) or supports ES modules

Steps

1. Install pdfjs-dist via npm: npm install pdfjs-dist
2. Set the worker file path in your initialization code — PDF.js requires a worker script to parse PDFs asynchronously
3. Create a canvas element in your HTML where the PDF will render
4. Load the PDF document using getDocument() with either a URL string or binary data
5. Fetch individual pages using getPage(pageNumber) on the PDF document object
6. Create a render context with the canvas 2D context and specify viewport scaling
7. Call render() on the page with the rendering task to draw it to the canvas
8. Implement navigation controls to increment/decrement the current page number and re-render

Code

import * as pdfjsLib from 'pdfjs-dist';

// Set the worker source
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;

class PDFViewer {
  constructor(containerSelector, pdfUrl) {
    this.container = document.querySelector(containerSelector);
    this.pdfUrl = pdfUrl;
    this.pdfDoc = null;
    this.pageNum = 1;
    this.pageRendering = false;
    this.pageNumPending = null;
    this.scale = 1.5;
    
    this.setupUI();
  }

  setupUI() {
    this.container.innerHTML = `
      <div class="pdf-viewer">
        <div class="pdf-controls">
          <button id="prev-btn">← Previous</button>
          <span id="page-info"></span>
          <button id="next-btn">Next →</button>
          <input type="range" id="zoom-slider" min="0.5" max="3" step="0.1" value="1.5">
        </div>
        <canvas id="pdf-canvas"></canvas>
      </div>
    `;

    this.canvas = document.getElementById('pdf-canvas');
    this.pageInfo = document.getElementById('page-info');
    
    document.getElementById('prev-btn').addEventListener('click', () => this.prevPage());
    document.getElementById('next-btn').addEventListener('click', () => this.nextPage());
    document.

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change