JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PDF.js Viewer with Editable I-9 Form</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    #pdf-container {
      position: relative;
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    canvas {
      border: 1px solid #ccc;
    }
    .form-field {
      position: absolute;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <h1>PDF.js Viewer with Editable I-9 Form</h1>
  <div id="pdf-container">
    <canvas id="pdf-canvas"></canvas>
  </div>
  <button id="save-button" style="margin-top: 20px;">Save Form Data</button>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
  <script>
    // Set the worker source for PDF.js
    pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";

    // Use the Google Drive direct download link
    const pdfUrl = "https://drive.google.com/uc?id=1YeHxRYBo8bRdJuoxl1ohuXeAKbqPFtTV&export=download";

    // Get canvas and its context
    const canvas = document.getElementById('pdf-canvas');
    const ctx = canvas.getContext('2d');
    const container = document.getElementById('pdf-container');
    const saveButton = document.getElementById('save-button');

    // Load and render the PDF
    pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
      // Fetch the first page
      pdf.getPage(1).then(page => {
        // Define viewport with scaling
        const viewport = page.getViewport({ scale: 1.5 });

        // Set canvas dimensions to match the viewport
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        // Render the page onto the canvas
        const renderContext = {
          canvasContext: ctx,
          viewport:...