Bagaimana untuk menyesuaikan PDF.js-tutorial js-php.cn

Bagaimana untuk menyesuaikan PDF.js

Linda Hamilton

Lepaskan： 2024-10-20 06:24:29

asal

831 orang telah melayarinya

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

Salin selepas log masuk

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"));

Salin selepas log masuk

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

Salin selepas log masuk

Pilih tetapan:

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

Salin selepas log masuk

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

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>

Salin selepas log masuk

Kini anda boleh menjalankan pelayan web dev:
```
npm run dev
```
Salin selepas log masuk
yang akan menunjukkan:
```
➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help    
```
Salin selepas log masuk
Klik url Setempat dengan kekunci CTRL untuk melancarkan penyemak imbas.
Anda akan melihat bahawa Pemapar PDF dipaparkan dalam halaman.