Wyświetlaj pliki PDF w swojej aplikacji React bez problemu dzięki React-PDF
React-PDF umożliwia wyświetlanie plików PDF tak, jakby były obrazami w aplikacji React, bez żadnych problemów i bez użycia wielu wtyczek.
Programiści często muszą dodawać pliki PDF do aplikacji React i chociaż uzyskanie odpowiedniej rozdzielczości, rozmiaru lub układu może być trudne, React-PDF pozwala dodawać pliki PDF do aplikacji React, tak jak obrazy. Jest do pobrania za darmo, open source i kompletny pakiet. React PDF został opracowany przy użyciu JavaScript i CSS i jest w pełni kompatybilny z każdą aplikacją React.
Obecnie dostępnych jest wiele wersji React-PDF, a najnowsza to React-PDF v5. Inne wersje również stale otrzymują poprawki błędów i aktualizacje, jednak użycie React-PDF v5 zapewni optymalne wyniki.
Aby korzystać z React-PDF, upewnij się, że Twoja aplikacja React korzysta z najnowszej wersji React, tj. React 16.3 lub nowszej. Jeśli używasz starszych wersji React, będziesz musiał użyć starszych wersji React-PDF.
Pierwsze kroki z React-PDF
Zalecanym i najłatwiejszym sposobem na rozpoczęcie jest instalacja przez npm, poniżej znajduje się polecenie.
Zainstaluj React-PDF przez npm
npm install react-pdf Możesz także zainstalować go ręcznie; pobierz pliki najnowszej wersji bezpośrednio z repozytorium GitHub.
Renderowanie znaków spoza alfabetu łacińskiego w darmowym API JavaSrcipt
Biblioteka React-PDF o otwartym kodzie źródłowym umożliwia programistom programowe renderowanie znaków innych niż łacińskie w ich własnych aplikacjach za pomocą poleceń JavaScript. React-PDF obsługuje również znaki inne niż łacińskie, a jeśli chcesz mieć pewność, że wszystkie znaki inne niż łacińskie są renderowane poprawnie, gdy plik PDF jest wyświetlany w projekcie, możesz to zrobić za pomocą cMaps skopiowanych z pdfjs-dist.
Załaduj jedną lub wiele stron PDF za pomocą bezpłatnego interfejsu API JavaScript
Znacznik Dokument umożliwia załadowanie dokumentu PDF, który jest przekazywany przez właściwość Plik. Za pomocą tego tagu możesz załadować jedną lub wiele stron albo dodać nawigację. Możesz także wyróżniać tekst na stronie, wyświetlać spis treści w sposób interaktywny, a także udostępniać linki zewnętrzne.
Jak wyświetlić pojedynczą stronę PDF za pomocą JavaScript API
import React from 'react';
import { Document, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
return (
);
}
Zarządzaj adnotacjami w dokumentach PDF za pomocą JavaScript
Biblioteka JavaScript typu open source React-PDF daje programistom możliwość programowego zarządzania różnymi typami adnotacji w dokumentach PDF. Pamiętaj, że użytkownik musi dołączyć arkusz stylów niezbędny do poprawnego wyświetlania adnotacji. Pozwala użytkownikom z łatwością wyróżniać tekst, pismo odręczne, notatki, kształty i nie tylko.
Jak obsługiwać linki zewnętrzne w plikach PDF za pomocą 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 (
);
}
