Maison > Article > interface Web > Comment personnaliser PDF.js

Comment personnaliser PDF.js

Linda Hamiltonoriginal: 2024-10-20 06:24:29833parcourir

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

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

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

Choisissez les paramètres :

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

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

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>

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

Documentation

Documents API HTML
Documentation de l'API Markdown
Base de connaissances

Démos en direct

Test de l'ensemble de modules
Test du paquet de scripts

Links:

GitHub
NPM

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Maîtriser la méthode obsolète `addRoutes` dans Vue Router .rojectArticle suivant：Maîtriser la méthode obsolète `addRoutes` dans Vue Router .roject

Articles Liés

Voir plus