Rendu PDF personnalisé en JavaScript avec Mozilla & # x27; s Pdf.js

Examen par des pairs par Jani Hartikainen, Florian Rappl, Jezen Thomas et Jeff Smith. Merci aux pairs examinateurs de SitePoint pour leurs contributions!

La plupart des navigateurs modernes prennent en charge la visualisation PDF, mais cette fonctionnalité est au-delà du contrôle direct d'un développeur. Imaginez avoir besoin de personnaliser l'affichage PDF d'une application Web - désactiver le bouton d'impression ou restreindre l'accès à la page en fonction des abonnements utilisateur. Alors que la balise <embed></embed> utilise le rendu natif du navigateur, il n'a pas le contrôle programmatique de ces personnalisations.

Entrez PDF.js, une bibliothèque puissante de Mozilla Labs. Il rend les PDF dans le navigateur, donnant aux développeurs un contrôle total sur le processus de rendu.

Caractéristiques clés de pdf.js:

• Contrôle complet: Terger les limitations du navigateur et personnaliser le rendu PDF.
• basé sur HTML5: Fonctionne dans des navigateurs modernes sans plugins.
• Options de rendu: prend en charge la toile et le SVG pour une implémentation flexible.
• Chargement asynchrone: utilise des promesses pour une manipulation efficace des fichiers volumineux.
• Fonctionnalités avancées: Active le rendu de la couche texte, le zoom personnalisé, et plus encore.

Comprendre Pdf.js

pdf.js, construit sur HTML5, élimine le besoin de plugins tiers. Son utilisation s'étend à divers services de partage de fichiers en ligne (Dropbox, CloudUp, Jumpshare, etc.) pour une visualisation PDF en ligne transparente. Bien que incroyablement utile, l'intégration de PDF.js peut être difficile en raison de la documentation limitée sur des fonctionnalités avancées telles que les couches de texte, les annotations et les fichiers protégés par mot de passe.

Cet article explore l'intégration PDF.js, couvrant:

• Intégration de base
• rendu SVG
• Rendre la couche texte
• Zoom

Intégration de base

1. Télécharger les fichiers nécessaires:

pdf.js est une bibliothèque JavaScript. Vous aurez besoin de pdf.js et pdf.worker.js. Alors que Node.js et Gulp sont des options de téléchargement, une approche plus simple utilise ces URL directes (fournissant toujours la dernière version):

• https://mozilla.github.io/pdf.js/build/pdf.js
• https://mozilla.github.io/pdf.js/build/pdf.worker.js

2. Travailleurs Web et pdf.js:

l'analyse et le rendu PDF sont à forte intensité de calcul. PDF.js exploite les travailleurs Web HTML5 pour décharger ces tâches sur un thread séparé, empêchant les verrouillage du navigateur. Il s'agit du comportement par défaut, mais peut être désactivé si nécessaire.

3. Promesses dans pdf.js:

L'API PDF.JS utilise des promesses pour une manipulation de fonctionnement asynchrone propre.

4. Un exemple simple:

Rendons un simple "Hello World!" PDF (disponible chez http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf). Assurez-vous que vos fichiers sont servis via un serveur Web local (par exemple, http://localhost/pdfjs_learning/index.html).

inclure pdf.js dans votre index.html:

<🎜>

Vous pouvez éventuellement spécifier le chemin pdf.worker.js si ce n'est pas dans le même répertoire:

PDFJS.workerSrc = "/path/to/pdf.worker.js";

Maintenant, ajoutez le JavaScript suivant pour rendre le PDF:

var url = "http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf";

PDFJS.getDocument(url)
  .then(function(pdf) {
    return pdf.getPage(1);
  })
  .then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });

et ajoutez un élément <canvas> à votre index.html:

<canvas id="the-canvas"></canvas>

Ce code récupére, analyse et rend le PDF sur la toile. PDFJS.getDocument() initie le téléchargement asynchrone; pdf.getPage() récupère une page spécifique; page.render() effectue le rendu.

Rendu à l'aide de SVG

pdf.js prend également en charge le rendu SVG. Modifiez la section page.render() pour utiliser SVG:

page.getOperatorList()
  .then(function(opList) {
    var svgGfx = new PDFJS.SVGGraphics(page.commonObjs, page.objs);
    return svgGfx.getSVG(opList, viewport);
  })
  .then(function(svg) {
    container.appendChild(svg);
  });

Remplacez le <canvas> par un <div id="the-svg"> </div> dans votre html.

Rendre les calques de texte

pour activer la sélection de texte, téléchargez text_layer_builder.js <code>text_layer_builder.js et text_layer_builder.css <code>text_layer_builder.css et les inclure dans votre HTML. Utilisez un PDF plus complexe (par exemple, http://mozilla.github.io/pdf.js/web/compression.tracemonkey-pldi-09.pdf <code>http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf). Le code suivant rend plusieurs pages et ajoute des calques de texte:

<🎜>

Zoom

Ajustez la variable Scale <code>scale pour contrôler le niveau de zoom.

Conclusion

pdf.js fournit un moyen puissant et flexible d'intégrer le rendu PDF personnalisé dans les applications Web. Son API propre et sa manipulation asynchrone en font un outil précieux pour les développeurs. Expérimentez le code et explorez ses fonctionnalités avancées!

Questions fréquemment posées (FAQ) (résumé de manière concise)

• Objectif du rendu personnalisé: fournit une expérience utilisateur transparente dans l'application Web, éliminant le besoin de téléspectateurs PDF externes.
• Comment fonctionne PDF.js: Parses and Rende PDFS en utilisant HTML5 et les normes Web.
• Implémentation: Incluez la bibliothèque, utilisez l'API pour charger et rendre sur une toile.
• Personnalisation: Manipuler la toile et utiliser CSS pour coiffer.
• Limitations: peut lutter avec des PDF complexes, les performances dépend de la taille et du périphérique du fichier.
• Amélioration des performances: Optimiser les fichiers PDF, utiliser le chargement paresseux.
• Compatibilité: Fonctionne bien avec d'autres bibliothèques JavaScript.
• Licence: Open-source (Apache License 2.0).
• Contribution: Bienvenue pour contribuer au projet.
• Support: Consultez la documentation officielle et la communauté GitHub.

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!