1. Товары
  2.   PDF
  3.   JavaScript
  4.   React-PDF
 
  

Отображение 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.

Previous Next

Начало работы с React-PDF

Рекомендуемый и самый простой способ начать — установить через npm, ниже приведена команда.

Установите React-PDF через npm

npm install react-pdf

Вы также можете установить его вручную; загрузите файлы последней версии напрямую из репозитория GitHub.

Рендеринг нелатинских символов в бесплатном API JavaScipt

Библиотека React-PDF с открытым исходным кодом позволяет разработчикам программного обеспечения программно отображать нелатинские символы внутри своего собственного приложения с помощью команд JavaScript. React-PDF также поддерживает нелатинские символы, и если вы хотите убедиться, что любые нелатинские символы отображаются правильно при отображении PDF в проекте, вы можете сделать это с помощью cMaps, скопированного из pdfjs-dist.

Загрузите одну или несколько страниц PDF с помощью бесплатного API JavaScript

Тег Document позволяет загружать документ PDF, который передается через свойство File. С помощью этого тега вы можете загрузить одну или несколько страниц, а также добавить навигацию. Вы также можете выделить текст на странице, отобразить оглавление в интерактивном режиме и предоставить внешние ссылки.

Как отобразить одну страницу 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 (
    
      
    
  );
}
 Русский