रिएक्ट-पीडीएफ के माध्यम से बिना किसी समस्या के अपने रिएक्ट ऐप में पीडीएफ फाइलों को प्रदर्शित करें

रिएक्ट-पीडीएफ के साथ शुरुआत करना

आरंभ करने के लिए अनुशंसित और आसान तरीका npm के माध्यम से स्थापित करना है, नीचे कमांड है।

npm install react-pdf 

मुक्त JavaSript API में गैर-लैटिन वर्ण रेंडरिंग

ओपन सोर्स रिएक्ट-पीडीएफ लाइब्रेरी सॉफ्टवेयर डेवलपर्स को जावास्क्रिप्ट कमांड का उपयोग करके अपने स्वयं के एप्लिकेशन के अंदर गैर-लैटिन वर्णों को प्रोग्रामेटिक रूप से प्रस्तुत करने में सक्षम बनाती है। रिएक्ट-पीडीएफ में गैर-लैटिन वर्ण समर्थन भी है, और यदि आप यह सुनिश्चित करना चाहते हैं कि किसी परियोजना में पीडीएफ प्रदर्शित होने पर किसी भी गैर-लैटिन वर्ण को ठीक से प्रस्तुत किया जाए, तो आप इसे पीडीएफजेएस-डिस्ट से कॉपी किए गए सीमैप्स के साथ प्राप्त कर सकते हैं।

फ्री जावास्क्रिप्ट एपीआई का उपयोग करके सिंगल या मल्टीपल पीडीएफ पेज लोड करें

दस्तावेज़ टैग आपको एक पीडीएफ दस्तावेज़ लोड करने की अनुमति देता है जो फ़ाइल प्रोप के माध्यम से पारित किया जाता है। इस टैग के साथ आप या तो एक या एक से अधिक पेज लोड कर सकते हैं, या नेविगेशन भी जोड़ सकते हैं। आप एक पृष्ठ पर पाठ को हाइलाइट भी कर सकते हैं, सामग्री की तालिका को एक इंटरैक्टिव तरीके से दिखा सकते हैं, और बाहरी लिंक भी प्रदान कर सकते हैं।

import React from 'react';
import { Document, Page } from 'react-pdf';
import samplePDF from './test.pdf';
export default function Test() {
  return (
    
      
    
  );
}

जावास्क्रिप्ट के माध्यम से पीडीएफ दस्तावेज़ों में एनोटेशन प्रबंधित करें

ओपन सोर्स जावास्क्रिप्ट लाइब्रेरी रिएक्ट-पीडीएफ सॉफ्टवेयर प्रोग्रामर को अपने पीडीएफ दस्तावेजों के अंदर विभिन्न प्रकार के एनोटेशन को प्रोग्रामेटिक रूप से प्रबंधित करने की क्षमता देता है। कृपया याद रखें कि एनोटेशन को सही ढंग से प्रदर्शित करने के लिए उपयोगकर्ता की स्टाइल-शीट को शामिल करने की आवश्यकता है। यह उपयोगकर्ताओं को आसानी से हाइलाइट, टेक्स्ट, स्याही, नोट, आकार और बहुत कुछ करने की अनुमति देता है।

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 (
    
      
    
  );
}