Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menyesuaikan PDF.js

Bagaimana untuk menyesuaikan PDF.js

Linda Hamilton
Linda Hamiltonasal
2024-10-20 06:24:29833semak imbas

How to customize PDF.js

PDF.js ialah projek sumber terbuka yang hebat yang kerap dikemas kini dan ciri baharu ditambah, walau bagaimanapun nampaknya ia hodoh, atau mungkin katakan ia kelihatan ketinggalan zaman. Bagaimana pula dengan mendapatkan ciri dan pembetulan PDF terkini daripada PDF.js tetapi melihat bahagian pembentangan yang licin?

Pemapar pdf daripada PdfJsKit tidak mengganggu, ia tidak menukar kod PDF.js secara langsung, ia hanya menyertakan PDF.js dalam iframe dan pada masa jalan menimpa HTML, JS dan CSS untuk menawarkan rupa moden yang licin dan ui yang lebih baik struktur dan kebolehgunaan serta ciri baharu. Dengan cara ini kami sentiasa boleh mengemas kini PDF.js kepada versi terkini dengan mudah dan mendapatkan semua pembetulan pepijat dan penambahbaikan.

Penonton pdf lain berdasarkan PDF.js biasanya tidak mengemas kini rupa lalai, dan yang biasanya terlepas fungsi disebabkan pemisahan kepada komponen tetapi melaksanakan sebahagiannya atau menawarkan API yang buruk/separa.

Bermula

Pasang pakej pada projek anda:

npm install pdfjskit

Apabila pakej dipasang (atau versi dikemas kini), aset (css, imej dll.) yang digunakan oleh PdfJsKit akan disalin secara automatik daripada node_modulespdfjskitdistpdfjskit ke publicpdfjskit. Subdirektori awam projek anda ialah tempat biasa untuk aset web, tetapi jika rangka kerja JS anda mempunyai struktur direktori yang berbeza, anda boleh mengalihkan aset ke tempat lain.

Secara lalai PdfJsKit memuatkan aset daripada subdirektori pdfjskit berbanding dengan halaman hos tetapi anda boleh menukar laluan ini melalui menghantar pilihan libraryPath tersuai kepada pembina PdfViewer.

Penggunaan

import PdfViewer from "pdfjskit";

var pdfViewer = new PdfViewer({
  documentUrl: "pdfjskit/sample.pdf",
  width: "80%",
  height: 720,
  resizable: true,
  language: "en-US",
  theme: "slate, classic-dark"
});

pdfViewer.render(document.getElementById("container"));

Perhatikan bahawa pakej NPM mengandungi modul ES6 pdfjskit.min.mjs, juga versi skrip pdfjskit.min.js disediakan dalam direktori GitHub dist/pdfjskit dan dalam pakej pembangun yang ditawarkan di sini.

Menggunakan PdfJsKit dalam projek JS biasa dengan Vite

Anda boleh menggunakan sse mana-mana rangka kerja JS (React, Vue, Angular, Svelte, Blazor dll) dengan PdfJsKit, namun untuk kesederhanaan dalam siaran ini, saya akan menunjukkan penggunaan untuk projek JS biasa.

Untuk projek JS biasa, saya syorkan menggunakan Vite, dengan cara ini anda boleh mengimport dari modul dalam fail HTML dengan mudah:

  1. Buat templat projek Vite:

    npm create vite@latest
    

    Pilih tetapan:

    ✔ Project name: … pdfjskit-vite-example
    ✔ Select a framework: › Vanilla
    ✔ Select a variant: › JavaScript
    
  2. Subdirektori dengan nama projek anda akan dibuat, lakukan perkara berikut:

    cd pdfjskit-vite-example
    npm install
    npm install pdfjskit
    
  3. Edit index.html dan gantikan kandungan dengan:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>PdfJsKit Vite Example</title>
      </head>
      <body>
    
        <div id="container"></div>
    
        <script type="module">
          import PdfViewer from "pdfjskit";
    
          var pdfViewer = new PdfViewer({
            documentUrl: "pdfjskit/sample.pdf",
            width: "80%",
            height: 720,
            resizable: true,
            language: "en-US",
            theme: "slate, classic-dark"
          });
    
          pdfViewer.render(document.getElementById("container"));
        </script>
    
      </body>
    </html>
    
  4. Kini anda boleh menjalankan pelayan web dev:

    npm run dev
    

    yang akan menunjukkan:

    ➜  Local:   http://localhost:5173/
    ➜  Network: use --host to expose
    ➜  press h + enter to show help    
    

    Klik url Setempat dengan kekunci CTRL untuk melancarkan penyemak imbas.
    Anda akan melihat bahawa Pemapar PDF dipaparkan dalam halaman.

Dokumentasi

  • Dokumen API HTML
  • Dokumen API Markdown
  • Pangkalan Pengetahuan

Demo Langsung

  • Ujian Himpunan Modul
  • Ujian Himpunan Skrip

Pautan:

  • GitHub
  • NPM

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan PDF.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn