Zobrazte soubory PDF ve své aplikaci React bez problémů prostřednictvím React-PDF
React-PDF umožňuje zobrazovat soubory PDF, jako by to byly obrázky v aplikaci React, a to bez jakýchkoli potíží nebo použití více pluginů.
Vývojáři často potřebují přidávat soubory PDF do aplikací React, a přestože může být obtížné dosáhnout správného rozlišení, velikosti nebo rozložení, React-PDF vám umožňuje přidávat soubory PDF do aplikace React stejně jako obrázky. Je zdarma ke stažení, open source a kompletní balíček. React PDF byl vyvinut pomocí JavaScriptu a CSS a je plně kompatibilní s jakoukoli aplikací React.
V současné době je k dispozici mnoho verzí React-PDF, přičemž nejnovější je React-PDF v5. Ostatní verze také průběžně dostávají opravy chyb a aktualizace, nicméně použití React-PDF v5 poskytne optimální výsledky.
Abyste mohli používat React-PDF, ujistěte se, že vaše aplikace React používá nejnovější verzi React, tj. React 16.3 nebo novější. V případě, že používáte starší verze Reactu, budete muset použít starší verze React-PDF.
Začínáme s React-PDF
Doporučený a nejjednodušší způsob, jak začít, je instalace přes npm, níže je příkaz.
Nainstalujte React-PDF přes npm
npm install react-pdf
Můžete jej také nainstalovat ručně; stáhněte si nejnovější soubory vydání přímo z úložiště GitHub.
Nelatinkové vykreslování znaků ve bezplatném JavaSrcipt API
Knihovna React-PDF s otevřeným zdrojovým kódem umožňuje vývojářům softwaru programově vykreslovat znaky jiné než latinky uvnitř jejich vlastní aplikace pomocí příkazů JavaScriptu. React-PDF má také podporu nelatinkových znaků, a pokud se chcete ujistit, že všechny nelatinkové znaky jsou správně vykresleny při zobrazení PDF v projektu, můžete to udělat pomocí cMaps zkopírovaných z pdfjs-dist.
Načtěte jednu nebo více stránek PDF pomocí bezplatného JavaScript API
Tag Dokument vám umožňuje načíst dokument PDF, který je předán přes podpěru Soubor. Pomocí této značky můžete načíst jednu nebo více stránek nebo přidat navigaci. Můžete také zvýraznit text na stránce, zobrazit obsah interaktivním způsobem a také poskytnout externí odkazy.
Jak zobrazit jednu stránku PDF přes JavaScript API
import React from 'react';
import { Document, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
return (
);
}
Správa anotací v dokumentech PDF pomocí JavaScriptu
Open source JavaScriptová knihovna React-PDF dává softwarovým programátorům možnost programově spravovat různé typy anotací uvnitř jejich PDF dokumentů. Pamatujte, že uživatel potřebuje zahrnout šablonu stylů potřebnou pro správné zobrazení poznámek. Umožňuje uživatelům snadno zvýrazňovat, text, inkoust, poznámky, tvary a další.
Jak zacházet s externími odkazy v PDF pomocí JavaScriptu
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 (
);
}