Parādiet PDF failus savā React lietotnē bez problēmām, izmantojot React-PDF
React-PDF ļauj bez apgrūtinājumiem vai vairāku spraudņu izmantošanas parādīt PDF failus tā, it kā tie būtu attēli React lietotnē.
Daudzkārt izstrādātājiem ir jāpievieno PDF faili React lietojumprogrammām, un, lai gan var būt grūti noteikt pareizo izšķirtspēju, izmērus vai izkārtojumu, React-PDF ļauj pievienot PDF failus React lietojumprogrammai tāpat kā attēlus. Tā ir bezmaksas lejupielāde, atvērtā koda un pilnīga pakotne. React PDF tika izstrādāts, izmantojot JavaScript un CSS, un ir pilnībā savietojams ar jebkuru React lietojumprogrammu.
Pašlaik ir pieejamas daudzas React-PDF versijas, no kurām jaunākā ir React-PDF v5. Citās versijās arī pastāvīgi tiek veikti kļūdu labojumi un atjauninājumi, tomēr, izmantojot React-PDF v5, tiks nodrošināti optimāli rezultāti.
Lai izmantotu React-PDF, pārliecinieties, vai jūsu React lietojumprogramma izmanto jaunāko React versiju, t.i., React 16.3 vai jaunāku versiju. Ja izmantojat vecākas React versijas, jums būs jāizmanto vecākas React-PDF versijas.
Darba sākšana ar React-PDF
Ieteicamais un vienkāršākais veids, kā sākt, ir instalēt, izmantojot npm, tālāk ir komanda.
Instalējiet React-PDF, izmantojot npm
npm install react-pdf Varat to instalēt arī manuāli; lejupielādējiet jaunākos laidiena failus tieši no GitHub krātuves.
Rakstzīmju atveide bez latīņu valodas bezmaksas JavaSrcipt API
Atvērtā pirmkoda React-PDF bibliotēka ļauj programmatūras izstrādātājiem savā lietojumprogrammā programmatiski renderēt rakstzīmes, kas nav latīņu rakstzīmes, izmantojot JavaScript komandas. React-PDF atbalsta arī citas rakstzīmes, un, ja vēlaties pārliecināties, ka visas rakstzīmes, kas nav latīņu rakstzīmes, tiek pareizi renderētas, kad projektā tiek parādīts PDF fails, varat to paveikt, izmantojot cMaps, kas kopēts no pdfjs-dist.
Ielādējiet vienas vai vairākas PDF lapas, izmantojot bezmaksas JavaScript API
Dokumenta tags ļauj ielādēt PDF dokumentu, kas tiek nodots faila rekvizītam. Izmantojot šo tagu, varat ielādēt vienu vai vairākas lapas vai pievienot arī navigāciju. Varat arī izcelt tekstu lapā, interaktīvā veidā parādīt satura rādītāju un nodrošināt arī ārējās saites.
Kā parādīt vienu PDF lapu, izmantojot JavaScript API
import React from 'react';
import { Document, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
return (
);
}
Pārvaldiet anotācijas PDF dokumentos, izmantojot JavaScript
Atvērtā pirmkoda JavaScript bibliotēka React-PDF sniedz programmatūras programmētājiem iespēju programmatiski pārvaldīt dažāda veida anotācijas savos PDF dokumentos. Lūdzu, atcerieties, ka lietotājam ir jāiekļauj stila lapa, kas nepieciešama, lai anotācijas tiktu pareizi parādītas. Tas ļauj lietotājiem viegli izcelt, tekstu, tinti, piezīmes, formas un daudz ko citu.
Kā rīkoties ar ārējām saitēm PDF failos, izmantojot 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 (
);
}
