Показвайте PDF файлове във вашето приложение React без проблем чрез React-PDF
React-PDF ви позволява да показвате PDF файлове, сякаш са изображения в приложение на React, без никакви проблеми или използване на множество добавки.
Има много случаи, когато разработчиците трябва да добавят PDF файлове към React приложения и макар че може да е трудно да получите правилната разделителна способност, оразмеряване или оформление, React-PDF ви позволява да добавяте PDF файлове към React приложение точно като изображения. Той е безплатен за изтегляне, с отворен код и пълен пакет. React PDF е разработен с помощта на JavaScript и CSS и е напълно съвместим с всяко React приложение.
В момента има много версии на React-PDF, като последната е React-PDF v5. Другите версии също непрекъснато получават корекции на грешки и актуализации, но използването на React-PDF v5 ще даде оптимални резултати.
За да използвате React-PDF, уверете се, че вашето React приложение използва най-новата версия на React, т.е. React 16.3 или по-нова. В случай, че използвате по-стари версии на React, тогава ще трябва да използвате по-старите версии на React-PDF.
Първи стъпки с React-PDF
Препоръчителният и най-лесният начин да започнете е да инсталирате чрез npm, по-долу е командата.
Инсталирайте React-PDF чрез npm
npm install react-pdf Можете също да го инсталирате ръчно; изтеглете файловете с най-новата версия директно от хранилището на GitHub.
Изобразяване на нелатински знаци в безплатен JavaSrcipt API
Библиотеката React-PDF с отворен код позволява на разработчиците на софтуер програмно да изобразяват нелатинични знаци в собственото си приложение, използвайки JavaScript команди. React-PDF поддържа и не-латински символи и ако искате да сте сигурни, че всички не-латински знаци се изобразяват правилно, когато PDF се показва в проект, можете да го направите с cMaps, копирани от pdfjs-dist.
Заредете една или няколко PDF страници с помощта на безплатен JavaScript API
Тагът Document ви позволява да заредите PDF документ, който се предава през File prop. С този етикет можете да заредите една или няколко страници или да добавите навигация. Можете също така да маркирате текст на страница, да показвате съдържанието по интерактивен начин и да предоставяте външни връзки.
Как да покажете една PDF страница чрез JavaScript API
import React from 'react';
import { Document, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
return (
);
}
Управление на анотации в PDF документи чрез JavaScript
JavaScript библиотеката с отворен код React-PDF дава възможност на софтуерните програмисти да управляват програмно различни типове анотации в своите PDF документи. Моля, не забравяйте, че потребителят трябва да включи стилов лист, необходим за правилното показване на анотациите. Той позволява на потребителите да подчертават, текст, ръкопис, бележки, форми и много други с лекота.
Как да обработвате външни връзки в PDF файлове чрез 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 (
);
}
