Menangani PDF yang dilindungi kata sandi dalam JavaScript – Beragampengetahuan
1 min read

Menangani PDF yang dilindungi kata sandi dalam JavaScript – Beragampengetahuan

Maximal0Tagged , , , , , , , ,

PDF adalah salah satu format termudah untuk berbagi dokumen. Mereka portabel dan memberikan kontrol akses dasar dengan perlindungan kata sandi. Dalam artikel ini, kita akan membahas salah satu dari banyak cara untuk membuka dan membuka dokumen PDF yang dilindungi kata sandi di JavaScript.

Posting ini menggunakan PDF.js dan alat JavaScript klien yang dibangun di browser modern:

  1. Baca file PDF dari perangkat pengguna.
  2. Kata sandi hanya diminta jika PDF dilindungi kata sandi.
  3. Tunjukkan umpan balik tentang upaya gagal untuk membuka kunci file PDF.
  4. Gunakan API kanvas browser untuk membuat halaman PDF yang didekripsi.

Contents

Mulailah Proyek JavaScript baru

Sebagai langkah pertama, mari kita atur perancah untuk aplikasi vanilla javascript menggunakan vite. Jalankan perintah berikut di terminal Anda untuk membuat aplikasi web bernama baru vanilla javascript baru PDF-Password dan instal dependensinya.

npm create vite@latest -- --template vanilla pdf-password && cd pdf-password && npm install

Selanjutnya, instal pdf.js sebagai dependensi proyek:

npm install pdfjs-dist

Kemudian, buka yang baru dibuat PDF-Password Folder di editor kode pilihan Anda mulai membangun penampil PDF.

Buat elemen HTML untuk menangani input pengguna dan rendering pdf

Penggantian Konten Proyek index.html Kirimkan dokumen berikut.

<!-- pdf-password/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href=" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Locked PDF Viewer</title>
  </head>
  <body>
    <form class="pdf-form">
      <label for="pdf-form__input" class="pdf-form__label"
        >View a PDF file in your browser</label
      >
      <input type="file" name="pdf-file" id="" class="pdf-form__input" />
    </form>

    <div class="password-form-backdrop">
      <form class="password-form">
        <label for="" class="password-form__label"
          >The PDF is password-protected. Please enter its password.</label
        >
        <p class="password-incorrect">Incorrect password. Please try again.</p>
        <input
          type="password"
          name="password"
          class="password-input"
          placeholder="PDF Password"
          autocomplete=""
          autofocus
        />
        <button type="submit" class="password-submit">Unlock</button>
      </form>
    </div>

    <canvas class="pdf-canvas"></canvas>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Formulir pertama dalam tag di atas menangani unggahan file pada perangkat pengguna, sedangkan formulir kedua mengumpulkan kata sandi PDF. Elemen kanvas akan digunakan untuk membuat halaman PDF.

Karena tujuan kami adalah untuk secara visual menyenangkan formulir unggahan PDF (bahkan jika itu hanya demonstrasi), mari kita ganti konten proyek src/style.css File dengan aturan gaya berikut:

/* pdf-password/src/style.css */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
input,
input::placeholder,
button,
.pdf-form__input::file-selector-button {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  background-color: rgb(239, 246, 253);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  max-width: 100%;
}

form {
  background-color: white;
  border-radius: 1em;
  padding: 4em 2em;
  flex-basis: 400px;
  max-width: 100%;
}

label {
  font-size: 1.5rem;
  display: inline-block;
  margin-bottom: 12px;
}

.pdf-form__input::file-selector-button {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5em;
  padding: 0.75em;
  font-size: 1rem;
  background-color: transparent;
  cursor: pointer;
}

.password-form-backdrop {
  display: none;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
}

.password-incorrect {
  color: rgb(220, 20, 60);
  display: none;
}

.password-input,
.password-submit {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5em;
  padding: 0.75em;
  font-size: 1rem;
  width: 100%;
  margin-bottom: 20px;
}

.password-submit {
  border: none;
  background-color: dodgerblue;
  color: white;
  cursor: pointer;
}

.pdf-canvas {
  max-width: 100%;
  margin: 0 auto;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* pdf-password/src/style.css */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
input,
input::placeholder,
button,
.pdf-form__input::file-selector-button {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  background-color: rgb(239, 246, 253);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  max-width: 100%;
}

form {
  background-color: white;
  border-radius: 1em;
  padding: 4em 2em;
  flex-basis: 400px;
  max-width: 100%;
}

label {
  font-size: 1.5rem;
  display: inline-block;
  margin-bottom: 12px;
}

.pdf-form__input::file-selector-button {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5em;
  padding: 0.75em;
  font-size: 1rem;
  background-color: transparent;
  cursor: pointer;
}

.password-form-backdrop {
  display: none;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
}

.password-incorrect {
  color: rgb(220, 20, 60);
  display: none;
}

.password-input,
.password-submit {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5em;
  padding: 0.75em;
  font-size: 1rem;
  width: 100%;
  margin-bottom: 20px;
}

.password-submit {
  border: none;
  background-color: dodgerblue;
  color: white;
  cursor: pointer;
}

.pdf-canvas {
  max-width: 100%;
  margin: 0 auto;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

Impor dependensi proyek

Hapus konten proyek SRC/Main.js File, lalu impor dan konfigurasikan stylesheets untuk pdf.js dan proyek SRC/Main.js Script terlihat seperti ini:

// pdf-password/src/main.js
import './style.css';

// Import pdfJs
import {
  GlobalWorkerOptions,
  getDocument,
  PasswordResponses,
} from 'pdfjs-dist';

// Setup pdfJs' worker from the package's node_modules folder
GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.mjs',
  import.meta.url
).toString();

Pada titik ini, jika Anda menjalankan, halaman indeks proyek harus mirip dengan gambar berikut npm run dev -- --open Dari folder root proyek.

Tampilkan konten PDF

Salin kode berikut untuk SRC/Main.js dokumen. Itu melampirkan pendengar acara ke bidang input file pdf-form ada index.html dokumen. Pendengar acara mendeteksi ketika pengguna memilih PDF, dan pawangnya mencoba untuk menampilkan konten dokumen di layar.

// Display an uploaded PDF file
document.querySelector('.pdf-form__input')
.addEventListener('change', viewPDF);

Sekarang mari kita tentukan Viewpdf Event handler, sebagai argumen kedua. AddEventListener metode. Salin kode berikut untuk SRC/Main.js dokumen. Lihat komentar dalam definisi fitur untuk memahami apa yang dilakukan setiap pernyataan dan ekspresi.

function viewPDF(e) {
  // Get the File object of the uploaded PDF.
  const file = e.target.files[0];

  // Continue only if the user has uploaded a PDF document
  if (file.type !== 'application/pdf') {
    alert(`Error: ${file.name} is not a PDF file`);
    return;
  }

  // Read the contents of the PDF file from the user's device
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);

  // Handle error(s) encountered while reading the contents of the PDF file
  reader.onerror = () => {
    alert(`Unable to read ${file.name} to an ArrayBuffer`);
    console.error(reader.error);
  };

  // Wait till FileReader has read all contents of the PDF file before proceeding
  reader.onload = async () => {
    // Transform the contents of the PDF file to a generic byte array
    const bytes = new Uint8Array(reader.result);

    // Using PDF.js, start loading the PDF contents from the above byte array
    const loadingTask = getDocument(bytes);

    // Prompt for a password only if PDF.js detects password protection while loading the document
    loadingTask.onPassword = handlePDFPassword;

    // Complete the process of loading the PDF document
    const pdfDocument = await loadingTask.promise;

    // Hide the PDF upload form since we don't need it anymore
    document.querySelector('.pdf-form').style.display = 'none';

    renderPage(pdfDocument);
  };
}

Prompt untuk memasukkan kata sandi Anda dan membuka kunci PDF yang dilindungi kata sandi

ini Handingpdfpassword Pengaturan fungsi ke Memuat tugas Onpassword Acara saat ini tidak ditentukan. Mari tambahkan fungsi berikut SRC/Main.js dokumen.

function handlePDFPassword(setPassword, reason) {
  const passwordForm = document.querySelector('.password-form-backdrop').style;
  const passwordIncorrect = document.querySelector('.password-incorrect').style;
   
   // Prompt for a password if PDF.js needs the file’s password to proceed
  if (reason === PasswordResponses.NEED_PASSWORD) {
    passwordForm.display = 'flex';
    passwordIncorrect.display = 'none';

    document.querySelector('.password-form').addEventListener('submit', (e) => {
      e.preventDefault();
      setPassword(document.querySelector('.password-input').value);
       
      // Hide password prompt after the correct password is submitted
      passwordForm.display = 'none';
      passwordIncorrect.display = 'none';
    });
  }

   // Display incorrect password error message if the entered password doesn’t unlock the PDF file
  if (reason === PasswordResponses.INCORRECT_PASSWORD) {
    passwordForm.display = 'flex';
    passwordIncorrect.display = 'block';
  }
}

Handingpdfpassword Ini hanya akan dipanggil jika perlindungan kata sandi terdeteksi ketika pdf.js memuat dokumen PDF. Pengguna yang mencoba melihat PDF yang tidak dilindungi non-komunikasi tidak akan meminta kata sandi.

Memberikan halaman PDF yang tidak terkunci

Akhirnya, salin definisi fungsi berikut SRC/Main.js dokumen. Seperti namanya, Halaman rendering Fungsi membuat halaman PDF yang dimuat ke halaman web.

async function renderPage(pdfDocument) {
  // Load the first page of the document.
  const page = await pdfDocument.getPage(1);

  // Use the page's dimensions (in pixels) to set the
  // dimensions of the canvas on which the page will be rendered
  const viewport = page.getViewport({ scale: 1 });
  const canvas = document.querySelector('.pdf-canvas');
  const canvasContext = canvas.getContext('2d');

  canvas.style.display = 'block';
  canvas.height = viewport.height;
  canvas.width = viewport.width;

  // Render the PDF page on the site
  const renderTask = page.render({
    canvasContext,
    viewport,
  });
  await renderTask.promise;
}

Cobalah!

Buka aplikasi di browser (dengan berjalan npm run dev -- --open), klik Pilih file tombol dan pilih file PDF yang dilindungi kata sandi.

Aplikasi ini akan meminta kata sandi PDF menggunakan formulir pop-up yang ditunjukkan di bawah ini sebelum menampilkan konten PDF.

Melangkah lebih jauh

ini Halaman rendering Fungsi yang didefinisikan di atas hanya membuat halaman pertama dari dokumen PDF. Panduan untuk menambahkan pagination ke aplikasi Anda dan/atau penanganan kesalahan yang lebih baik.

rencana pengembangan website



metode pengembangan website

jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website

#Menangani #PDF #yang #dilindungi #kata #sandi #dalam #JavaScript

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Website https://beragampengetahuan.com

Related Posts