1. Des produits
  2.   PDF
  3.   JavaScript
  4.   React-PDF
 
  

Affichez les fichiers PDF dans votre application React sans problème grâce à React-PDF

React-PDF vous permet d'afficher des fichiers PDF comme s'il s'agissait d'images dans une application React sans aucun problème ou en utilisant plusieurs plugins.

Il arrive souvent que les développeurs aient besoin d'ajouter des PDF aux applications React, et même s'il peut être difficile d'obtenir la bonne résolution, le dimensionnement ou la mise en page, React-PDF vous permet d'ajouter des PDF à une application React, tout comme des images. C'est gratuit à télécharger, open source et un package complet. React PDF a été développé en utilisant JavaScript et CSS et est entièrement compatible avec toute application React.

Il existe de nombreuses versions de React-PDF actuellement disponibles, la dernière étant React-PDF v5. Les autres versions reçoivent continuellement des corrections de bogues et des mises à jour, cependant, l'utilisation de React-PDF v5 donnera des résultats optimaux.

Pour utiliser React-PDF, assurez-vous que votre application React utilise la dernière version de React, c'est-à-dire React 16.3 ou une version ultérieure. Si vous utilisez des versions plus anciennes de React, vous devrez utiliser les anciennes versions de React-PDF.

Previous Next

Premiers pas avec React-PDF

La méthode recommandée et la plus simple pour commencer est d'installer via npm, ci-dessous la commande.

Installer React-PDF via npm

npm install react-pdf 

Vous pouvez également l'installer manuellement ; téléchargez les derniers fichiers de version directement depuis le référentiel GitHub.

Rendu des caractères non latins dans l'API JavaSrcipt gratuite

La bibliothèque open source React-PDF permet aux développeurs de logiciels de restituer par programmation des caractères non latins dans leur propre application à l'aide de commandes JavaScript. React-PDF prend également en charge les caractères non latins, et si vous voulez vous assurer que tous les caractères non latins sont correctement rendus lorsqu'un PDF est affiché dans un projet, vous pouvez le faire avec cMaps copié à partir de pdfjs-dist.

Charger des pages PDF simples ou multiples à l'aide de l'API JavaScript gratuite

La balise Document vous permet de charger un document PDF qui est transmis via la prop File. Avec cette balise, vous pouvez soit charger une ou plusieurs pages, soit également ajouter une navigation. Vous pouvez également mettre en surbrillance du texte sur une page, afficher la table des matières de manière interactive et fournir également des liens externes.

Comment afficher une seule page PDF via l'API JavaScript

import React from 'react';
import { Document, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
  return (
    
      
    
  );
}

Gérer les annotations dans les documents PDF via JavaScript

La bibliothèque JavaScript open source React-PDF donne aux programmeurs de logiciels la possibilité de gérer par programmation divers types d'annotations dans leurs documents PDF. N'oubliez pas que l'utilisateur doit inclure la feuille de style nécessaire pour que les annotations soient correctement affichées. Il permet aux utilisateurs de mettre en surbrillance, du texte, de l'encre, des notes, des formes et plus facilement.

Comment gérer les liens externes dans les PDF via JavaScript

import React, { useState } from 'react';
import { Document, Outline, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
  const [pageNumber, setPageNumber] = useState(1);
  function onItemClick({ pageNumber: itemPageNumber }) {
    setPageNumber(itemPageNumber);
  }
  return (
    
      
    
  );
}
 Français