Probléma nélkül jelenítsen meg PDF-fájlokat a React alkalmazásban a React-PDF segítségével
A React-PDF lehetővé teszi, hogy a PDF-fájlokat úgy jelenítse meg, mintha képek lennének a React alkalmazásban gond nélkül vagy több beépülő modul használata nélkül.
A fejlesztőknek sokszor kell PDF-eket hozzáadniuk a React-alkalmazásokhoz, és bár nehéz lehet a megfelelő felbontást, méretet vagy elrendezést beállítani, a React-PDF lehetővé teszi, hogy PDF-fájlokat a React-alkalmazásokhoz, akárcsak a képeket. Ingyenesen letölthető, nyílt forráskódú és teljes csomag. A React PDF-et JavaScript és CSS használatával fejlesztették ki, és minden React alkalmazással teljesen kompatibilis.
Jelenleg a React-PDF számos verziója elérhető, a legújabb a React-PDF v5. A többi verzió is folyamatosan kap hibajavításokat és frissítéseket, azonban a React-PDF v5 használata optimális eredményt ad.
A React-PDF használatához győződjön meg arról, hogy a React alkalmazás a React legújabb verzióját használja, azaz a React 16.3-as vagy újabb verzióját. Abban az esetben, ha a React régebbi verzióit használja, akkor a React-PDF régebbi verzióit kell használnia.
A React-PDF használatának megkezdése
Az indulás javasolt és legegyszerűbb módja az npm-en keresztüli telepítés, lent található a parancs.
Telepítse a React-PDF-et az npm-en keresztül
npm install react-pdf Kézzel is telepítheti; töltse le a legújabb kiadású fájlokat közvetlenül a GitHub tárhelyről.
Nem latin karakterek megjelenítése ingyenes JavaSrcipt API-ban
A nyílt forráskódú React-PDF könyvtár lehetővé teszi a szoftverfejlesztők számára, hogy JavaScript-parancsok segítségével programozottan rendereljenek nem latin karaktereket saját alkalmazásukon belül. A React-PDF rendelkezik a nem latin karakterek támogatásával is, és ha meg akar győződni arról, hogy a nem latin karakterek megfelelően jelennek meg, amikor egy PDF-fájl megjelenik egy projektben, akkor ezt a pdfjs-dist fájlból másolt cMaps segítségével végezheti el.
Töltsön be egyetlen vagy több PDF-oldalt az ingyenes JavaScript API használatával
A Dokumentum címke lehetővé teszi egy PDF-dokumentum betöltését, amely a Fájlprofilon keresztül halad át. Ezzel a címkével egy vagy több oldalt tölthet be, vagy navigációt is hozzáadhat. Ezenkívül kiemelhet szöveget az oldalon, interaktív módon megjelenítheti a tartalomjegyzéket, és külső hivatkozásokat is megadhat.
Egyetlen PDF-oldal megjelenítése JavaScript API-n keresztül
import React from 'react';
import { Document, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
return (
);
}
A PDF-dokumentumok megjegyzéseinek kezelése JavaScript segítségével
A nyílt forráskódú React-PDF JavaScript-könyvtár lehetővé teszi a szoftverprogramozók számára, hogy programozottan kezeljék a PDF-dokumentumaikban található különféle típusú megjegyzéseket. Ne feledje, hogy a felhasználónak tartalmaznia kell egy stíluslapot, amely a megjegyzések helyes megjelenítéséhez szükséges. Lehetővé teszi a felhasználók számára, hogy könnyedén kiemeljenek, szöveget, tintát, jegyzeteket, alakzatokat és még sok mást végezzenek.
A PDF-fájlok külső hivatkozásainak kezelése JavaScript-en keresztül
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 (
);
}
