Comment personnaliser PDF.js-js tutoriel-php.cn

Comment personnaliser PDF.js

Linda Hamilton

Libérer： 2024-10-20 06:24:29

original

969 Les gens l'ont consulté

How to customize PDF.js

PDF.js est un excellent projet open source qui est fréquemment mis à jour et de nouvelles fonctionnalités sont ajoutées, même si son apparence est moche, ou peut-être disons qu'il a l'air obsolète. Que diriez-vous d'obtenir les dernières fonctionnalités et correctifs PDF de PDF.js tout en jetant un coup d'œil du côté de la présentation ?

La visionneuse PDF de PdfJsKit est discrète, elle ne modifie pas directement le code de PDF.js, elle inclut simplement PDF.js dans une iframe et lors de l'exécution, remplace HTML, JS et CSS pour offrir un look moderne et une meilleure interface utilisateur. structure et convivialité et nouvelles fonctionnalités. De cette façon, nous pouvons toujours mettre à jour facilement PDF.js vers la dernière version et obtenir toutes les corrections de bugs et améliorations.

Les autres visionneuses de PDF basées sur PDF.js ne mettent généralement pas à jour l'apparence par défaut, et celles qui manquent généralement de fonctionnalités en raison de la séparation en composants mais de leur implémentation partielle ou offrent une API mauvaise/partielle.

Commencer

Installez le package sur votre projet :

npm install pdfjskit

Copier après la connexion

Lorsque le package est installé (ou la version est mise à jour), les actifs (css, images, etc.) utilisés par PdfJsKit seront copiés automatiquement de node_modulespdfjskitdistpdfjskit vers publicpdfjskit. Le sous-répertoire public de votre projet est un emplacement commun pour les ressources Web, mais si votre framework JS a une structure de répertoires différente, vous pouvez déplacer les ressources vers un autre emplacement.

Par défaut, PdfJsKit charge les actifs du sous-répertoire pdfjskit par rapport à la page hôte, mais vous pouvez modifier ce chemin en passant l'option libraryPath personnalisée au constructeur PdfViewer.

Usage

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

Copier après la connexion

Notez que le package NPM contient un module ES6 pdfjskit.min.mjs, également une version script pdfjskit.min.js est fournie dans le répertoire GitHub dist/pdfjskit et dans le package développeur proposé ici.

Utiliser PdfJsKit dans des projets Plain JS avec Vite

Vous pouvez utiliser n'importe quel framework JS (React, Vue, Angular, Svelte, Blazor, etc.) avec PdfJsKit, mais pour plus de simplicité dans cet article, je montrerai son utilisation pour les projets JS simples.

Pour les projets JS simples, je recommande d'utiliser Vite, de cette façon vous pouvez facilement importer depuis le module dans des fichiers HTML :

Créez un modèle de projet Vite :

npm create vite@latest

Copier après la connexion

Choisissez les paramètres :

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

Copier après la connexion

Un sous-répertoire avec le nom de votre projet sera créé, procédez comme suit :
```
cd pdfjskit-vite-example
npm install
npm install pdfjskit
```
Copier après la connexion

Modifiez index.html et remplacez le contenu par :

<!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>

Copier après la connexion

Vous pouvez maintenant exécuter le serveur Web de développement :
```
npm run dev
```
Copier après la connexion
qui affichera :
```
➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help    
```
Copier après la connexion
Cliquez sur l'URL locale avec la touche CTRL pour lancer le navigateur.
Vous verrez que PDF Viewer est rendu dans la page.