Vue Js Extract Text from Pdf

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.worker.min.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <h1>Vue Js Extract Text From Pdf</h1>
      <form>
        <input type="file" ref="pdfFile" @change="onFileChange">
      </form>
      <pre v-if="!loading" v-html="extractedText"></pre>
      <div v-if="loading">Processing PDF...</div>
    </div>
  </div>

const pdf = await window.pdfjsLib.getDocument(pdfUrl).promise;
          const maxPages = pdf.numPages;
          let textContent = [];

for (let i = 1; i <= maxPages; i++) {
            const page = await pdf.getPage(i);
            const content = await page.getTextContent();
            const pageTextContent = content.items.map(item => item.str).join('');
            textContent.push(pageTextContent);
          }

// set loading to false when the PDF processing is complete
          this.loading = false;

return textContent.join('\n');
        },

async onFileChange(event) {
          const file = event.target.files[0];
          const extension = file.name.split('.').pop();

if (extension !== 'pdf') {
            alert('Please select a PDF file');
            return;
          }

const reader = new FileReader();

reader.onload = async () => {
            const dataUrl = reader.result;

// set loading to true before extracting text from the PDF
            this.loading = true;

const text = await this.extractTextFromPdf(dataUrl);
            this.extractedText = text;

// set loading to false when the text extraction is complete
            this.loading = false;
          };

reader.readAsDataURL(file);
        },
      },
    });

</script>
  <style>
    #app {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
    }

h1 {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 20px;
    }

form {
      margin-bottom: 20px;
    }

input[type="file"] {
      font-size: 16px;
      padding: 10px 15px;
      background-color: #f7f7f7;
      border: 1px solid #ccc;
      border-radius: 5px;
      cursor: pointer;
    }

pre {
      font-size: 14px;
      line-height: 1.5;
      background-color: #f7f7f7;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px 15px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  </style>
</body>

</html>