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>Document Viewer</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    #viewer {
      margin-top: 20px;
    }
    canvas {
      border: 1px solid black;
    }
    #tokenInput {
      width: 300px;
    }
  </style>
</head>
<body>
  <h1>Document Viewer</h1>

  <!-- Input fields for URL and Token -->
  <div>
    <label for="docUrl">Document URL:</label>
    <input type="text" id="docUrl" placeholder="Enter URL to PDF or DOCX file" size="50">
  </div>
  <div>
    <label for="authToken">Auth Token:</label>
    <input type="text" id="authToken" placeholder="Enter your auth token" size="50">
  </div>
  <button onclick="loadDocument()">Load Document</button>

  <!-- Viewer for PDF and DOCX content -->
  <div id="viewer">
    <canvas id="pdfCanvas" style="display:none;"></canvas>
    <div id="docxContent" style="display:none;"></div>
  </div>

  <script>
    // Function to fetch and load the document (PDF or DOCX)
    function loadDocument() {
      const url = document.getElementById('docUrl').value;
      const token = document.getElementById('authToken').value;

      if (!token) {
        alert('Please enter an authentication token.');
        return;
      }

      if (url.endsWith('.pdf')) {
        renderPDF(url, token);
      } else if (url.endsWith('.docx')) {
        renderDocx(url, token);
      } else {
        alert('Please provide a valid URL to a PDF or DOCX file.');
      }
    }

    // Function to render PDF using PDF.js
    function renderPDF(url, token) {
      const pdfCanvas = document.getElementById('pdfCanvas');
      const docxContent = document.getElementById('docxContent');
     ...