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

Bagaimana untuk menyesuaikan PDF.js

Linda Hamiltonasal: 2024-10-20 06:24:29946semak 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:

Buat templat projek Vite:

npm create vite@latest

Pilih tetapan:

✔ Project name: … pdfjskit-vite-example
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

Subdirektori dengan nama projek anda akan dibuat, lakukan perkara berikut:
```
cd pdfjskit-vite-example
npm install
npm install pdfjskit
```

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>

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!

css html es6 npm angular if for Directory using public JS default constructor this github ui bug iframe

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

Artikel sebelumnya：Menguasai Kaedah `addRoutes` yang Dihentikan dalam Vue Router .rojectArtikel seterusnya：Menguasai Kaedah `addRoutes` yang Dihentikan dalam Vue Router .roject

Artikel berkaitan

Lihat lagi