1. Tuotteet
  2.   PDF
  3.   JavaScript
  4.   React-PDF
 
  

Näytä PDF-tiedostoja React-sovelluksessasi ilman ongelmia React-PDF:n avulla

React-PDF:n avulla voit näyttää PDF-tiedostoja ikään kuin ne olisivat kuvia React-sovelluksessa ilman vaivaa tai käyttämällä useita laajennuksia.

Kehittäjien on usein lisättävä PDF-tiedostoja React-sovelluksiin, ja vaikka resoluution, koon tai asettelun saaminen voi olla vaikeaa, React-PDF:n avulla voit lisätä PDF-tiedostoja React-sovellukseen aivan kuten kuvia. Se on ladattavissa ilmaiseksi, avoin lähdekoodi ja täydellinen paketti. React PDF kehitettiin JavaScriptin ja CSS:n avulla, ja se on täysin yhteensopiva kaikkien React-sovellusten kanssa.

React-PDF:stä on tällä hetkellä saatavilla monia versioita, joista viimeisin on React-PDF v5. Myös muut versiot saavat jatkuvasti virheenkorjauksia ja päivityksiä, mutta React-PDF v5:n käyttö antaa optimaalisen tuloksen.

Jotta voit käyttää React-PDF:ää, varmista, että React-sovelluksesi käyttää Reactin uusinta versiota eli React 16.3 tai uudempaa. Jos käytät Reactin vanhempia versioita, sinun on käytettävä React-PDF:n vanhempia versioita.

Previous Next

React-PDF:n käytön aloittaminen

Suositeltava ja helpoin tapa aloittaa on asentaa npm:n kautta, alla on komento.

Asenna React-PDF npm:n kautta

npm install react-pdf

Voit asentaa sen myös manuaalisesti; lataa uusimmat julkaisutiedostot suoraan GitHub-arkistosta.

Ei-latinalaisten merkkien renderöinti ilmaisessa JavaSrcipt API:ssa

Avoimen lähdekoodin React-PDF-kirjaston avulla ohjelmistokehittäjät voivat ohjelmallisesti hahmontaa ei-latinalaisia merkkejä omassa sovelluksessaan JavaScript-komentojen avulla. React-PDF:ssä on myös muiden kuin latinalaisten merkkien tuki, ja jos haluat varmistaa, että muut kuin latinalaiset merkit hahmonnetaan oikein, kun PDF näytetään projektissa, voit tehdä sen pdfjs-dist:stä kopioidulla cMapsilla.

Lataa yksittäisiä tai useita PDF-sivuja ilmaisella JavaScript-sovellusliittymällä

Asiakirja-tunnisteen avulla voit ladata PDF-dokumentin, joka välitetään File prop -sovelluksen kautta. Tällä tunnisteella voit joko ladata yhden tai useita sivuja tai lisätä myös navigoinnin. Voit myös korostaa sivulla olevaa tekstiä, näyttää sisällysluetteloa interaktiivisella tavalla ja tarjota myös ulkoisia linkkejä.

Yhden PDF-sivun näyttäminen JavaScript API:n kautta

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

Hallitse merkintöjä PDF-dokumenteissa JavaScriptin avulla

Avoimen lähdekoodin JavaScript-kirjasto React-PDF antaa ohjelmoijille mahdollisuuden hallita ohjelmallisesti erilaisia merkintöjä PDF-dokumenteissaan. Muista, että käyttäjän on sisällytettävä tyylitaulukko, joka on tarpeen, jotta huomautukset näkyvät oikein. Sen avulla käyttäjät voivat helposti korostaa, tekstiä, mustetta, muistiinpanoja, muotoja ja paljon muuta.

Kuinka käsitellä ulkoisia linkkejä PDF-tiedostoissa JavaScriptin kautta

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