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

Visa PDF-filer i din React-app utan problem genom React-PDF

React-PDF låter dig visa PDF-filer som om de vore bilder i en React-app utan krångel eller att använda flera plugins.

Det finns många gånger som utvecklare behöver lägga till PDF-filer till React-applikationer, och även om det kan vara svårt att få rätt upplösning, storlek eller layout, låter React-PDF dig lägga till PDF-filer till en React-applikation precis som bilder. Det är gratis att ladda ner, öppen källkod och ett komplett paket. React PDF utvecklades med JavaScript och CSS och är helt kompatibel för alla React-applikationer.

Det finns många versioner av React-PDF för närvarande tillgängliga, med den senaste är React-PDF v5. De andra versionerna får också kontinuerligt buggfixar och uppdateringar, men att använda React-PDF v5 kommer att ge optimala resultat.

För att kunna använda React-PDF se till att din React-applikation använder den senaste versionen av React, dvs. React 16.3 eller senare. Om du använder äldre versioner av React, måste du använda de äldre versionerna av React-PDF.

Previous Next

Komma igång med React-PDF

Det rekommenderade och enklaste sättet att komma igång är att installera via npm, nedan är kommandot.

Installera React-PDF via npm

npm install react-pdf

Du kan också installera det manuellt; ladda ner de senaste versionsfilerna direkt från GitHub-förrådet.

Återgivning av icke-latinska tecken i gratis JavaSrcipt API

React-PDF-biblioteket med öppen källkod gör det möjligt för mjukvaruutvecklare att programmatiskt rendera icke-latinska tecken i sin egen applikation med hjälp av JavaScript-kommandon. React-PDF har stöd för icke-latinska tecken också, och om du vill försäkra dig om att eventuella icke-latinska tecken renderas korrekt när en PDF visas i ett projekt, kan du få det gjort med cMaps kopierade från pdfjs-dist.

Ladda enstaka eller flera PDF-sidor med gratis JavaScript API

Med dokumenttaggen kan du ladda ett PDF-dokument som skickas genom filpropet. Med den här taggen kan du antingen ladda en enstaka eller flera sidor, eller lägga till navigering också. Du kan också markera text på en sida, visa innehållsförteckningen på ett interaktivt sätt och även tillhandahålla externa länkar.

Hur man visar en PDF-sida via JavaScript API

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

Hantera anteckningar i PDF-dokument via JavaScript

JavaScript-biblioteket med öppen källkod React-PDF ger programvaruprogrammerare möjligheten att programmatiskt hantera olika typer av kommentarer i sina PDF-dokument. Kom ihåg att användarens behov måste inkludera en stilmall som krävs för att anteckningar ska visas korrekt. Det låter användare enkelt markera, text, bläck, anteckningar, former och mer.

Hur man hanterar externa länkar 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 (
    
      
    
  );
}
 Svenska