1. Produkter
  2.   PDF
  3.   JavaScript
  4.   React-PDF
 
  

Vis PDF-filer i React-appen din uten problemer gjennom React-PDF

React-PDF lar deg vise PDF-filer som om de var bilder i en React-app uten problemer eller ved å bruke flere plugins.

Det er mange ganger utviklere trenger å legge til PDF-er til React-applikasjoner, og selv om det kan være vanskelig å få riktig oppløsning, størrelse eller layout, lar React-PDF deg legge til PDF-er til en React-applikasjon akkurat som bilder. Det er gratis å laste ned, åpen kildekode og en komplett pakke. React PDF ble utviklet ved hjelp av JavaScript og CSS og er fullstendig kompatibel for alle React-applikasjoner.

Det er mange versjoner av React-PDF tilgjengelig for øyeblikket, den siste er React-PDF v5. De andre versjonene får også kontinuerlig feilrettinger og oppdateringer, men bruk av React-PDF v5 vil gi optimale resultater.

For å bruke React-PDF må du sørge for at React-applikasjonen din bruker den nyeste versjonen av React, dvs. React 16.3 eller nyere. I tilfelle du bruker eldre versjoner av React, må du bruke de eldre versjonene av React-PDF.

Previous Next

Komme i gang med React-PDF

Den anbefalte og enkleste måten å komme i gang på er å installere via npm, nedenfor er kommandoen.

Installer React-PDF via npm

npm install react-pdf

Du kan også installere det manuelt; last ned de siste utgivelsesfilene direkte fra GitHub-depotet.

Gjengivelse av ikke-latinske tegn i gratis JavaSrcipt API

React-PDF-biblioteket med åpen kildekode gjør det mulig for programvareutviklere å programmatisk gjengi ikke-latinske tegn i sin egen applikasjon ved hjelp av JavaScript-kommandoer. React-PDF har også støtte for ikke-latinske tegn, og hvis du vil være sikker på at eventuelle ikke-latinske tegn gjengis riktig når en PDF vises i et prosjekt, kan du få det gjort med cMaps kopiert fra pdfjs-dist.

Last inn enkelt eller flere PDF-sider ved hjelp av gratis JavaScript API

Dokument-taggen lar deg laste inn et PDF-dokument som sendes gjennom fil-rekvisitten. Med denne taggen kan du enten laste en enkelt eller flere sider, eller legge til navigasjon også. Du kan også markere tekst på en side, vise innholdsfortegnelse på en interaktiv måte, og også gi eksterne lenker.

Slik viser du enkelt PDF-side via JavaScript API

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

Administrer merknader i PDF-dokumenter via JavaScript

JavaScript-biblioteket med åpen kildekode React-PDF gir programvareprogrammerere muligheten til å programmatisk administrere ulike typer merknader i PDF-dokumentene sine. Husk at brukerens behov må inkludere stilark som er nødvendig for at merknader skal vises riktig. Den lar brukere enkelt fremheve, tekst, blekk, notater, former og mer.

Hvordan håndtere eksterne lenker i PDF-filer 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 (
    
      
    
  );
}
 Norsk