Браузер на стороне ПК не имеет особых проблем с отображением файлов PDF.При наличии ссылки на PDF содержимое файла PDF может отображаться и отображаться с использованием стиля отображения браузера по умолчанию. например "www.baidu.com/test/pdf". Как отобразить этот файл на мобильной стороне. Чтобы отобразить и отобразить содержимое PDF-файла на мобильной стороне, в этой статье реализован простой компонент реагирования на основе pdfjs для отображения и рендеринга PDF-файла.

Опубликуйте этот компонент реакции как пакет npm.
Адрес проекта для этого компонента:GitHub.com/fort и все…(Если вы хотите увидеть пример использования, загрузите этот код или клонируйте его напрямую, затем установите npm и запустите npm)

React-read-pdf

Компонент, написанный на React 16.5 для отображения и рендеринга PDF-файлов на мобильных устройствах и ПК.

Функции

Simple: Простой и удобный в использовании, просто реактивный компонент
Mobile-friendly: Адаптация к различным мобильным устройствам, включая мобильные телефоны, планшеты и другое мобильное офисное оборудование.

Поддержка браузера

IE 10+
Firefox 3.6+
Chrome 6+
Safari 6+
Opera 11.5+
iOS Safari 6.1+
Android Browser 3+

быстрый старт

1. Внедрите react-read-pdf в свой реактивный проект

(Например, если вы сначала внедряете React в свой проект, вы должны убедиться, что версия React должна быть выше 15.0)

Установите пакет react-read-pdf

npm install --save react-read-pdf

Рекомендуется использовать PDFReader на стороне ПК:

import React from 'react';
import { PDFReader } from 'react-read-pdf';

На мобильной стороне рекомендуется использовать MobilePDFReader, который может адаптироваться к различным мобильным устройствам:

import React from 'react';
import { MobilePDFReader } from 'react-read-pdf';

2. После введения давайте посмотрим на простое использование:

import { MobilePDFReader } from 'react-read-pdf';
export default class Test extends Component{
  render(){
    return <div style={{overflow:'scroll',height:600}}>
            <MobilePDFReader url="http://localhost:3000/test.pdf"/>
           </div>
  }
}

import ReactDOM from 'react-dom';
import Test from './test'
ReactDOM.render(<Test />, document.getElementById('root'));

react-read-pdf адаптируется к различным мобильным устройствам, включая мобильные телефоны, планшеты и другие мобильные офисные устройства.На следующем рисунке показан пример использования react-read-pdf для отображения PDF на iphoneX.

Документация

Пакет npm react-read-pdf в основном включает два разных типа компонентов.PDFReader и MobilePDFReader.

🌱 PDFReader

import { PDFReader } from 'react-read-pdf'

...
<PDFReader url={"http://localhost:3000/test.pdf"} ...>

Свойства в компоненте PDFReader

Имя свойства	Типы	описывать
url	строка или объект	Если это строка, то URL-адрес представляет собой абсолютный или относительный адрес файла PDF, если это объект, вы можете увидеть конкретное описание свойств объекта ->url object type
data	нить	PDF-файлы, описанные в двоичном формате, в javascript, мы можем конвертировать PDF-файлы с кодировкой base64 в файлы с двоичным кодированием через «atob».
page	количество	Значение по умолчанию — 1, что означает, какая страница PDF-файла должна быть отображена.
scale	количество	Определяет размер области просмотра во время рендеринга
width	количество	Определяет ширину области просмотра во время рендеринга
showAllPage	Логическое значение	Значение по умолчанию — false, что означает, что он не будет отображаться одновременно, и будет отображаться только страница, указанная значением page. Если это значение равно true, визуализируются сразу все страницы PDF-файла.
onDocumentComplete	функция	После загрузки файла PDF вы можете вывести подробную информацию о файле PDF с помощью этой функции. Конкретная информация об этой функции показана ниже.function type

url **PDFReader** Свойство URL компонента

Типы:

string : строка, представляющая абсолютный или относительный адрес файла PDF.
object : объект со следующими свойствами

Атрибуты:

Имя свойства	Типы	описывать
url	нить	Строка, представляющая абсолютный или относительный адрес файла PDF.
withCredentials	Логическое значение	Определяет, содержит ли запрос файлы cookie

onDocumentComplete **PDFReader** свойство onDocumentComplete

Type:

function(totalPage)

Тип onDocumentComplete — это функция, первый параметр которой представляет общее количество страниц в файле PDF.

Меры предосторожности

Свойство url компонента PDFReader может быть строкой или объектом.

Допускаются следующие два метода.

Один:

 <MobilePDFReader url="http://localhost:3000/test.pdf"/>

Другой способ:

 <MobilePDFReader url={url:"http://localhost:3000/test.pdf"}/>

🌱 Мобильный PDF-ридер

import { MobilePDFReader } from 'react-read-pdf'

...
<MobilePDFReader url={"http://localhost:3000/test.pdf"} ...>

Свойства в компоненте MobilePDFReader

Имя свойства	Типы	описывать
url	нить	Если это строка, то URL-адрес представляет собой абсолютный или относительный адрес файла PDF.
page	количество	Значение по умолчанию — 1, что означает, какая страница PDF-файла должна быть отображена.
scale	номер или "авто"	Значение по умолчанию "авто", которое определяет размер окна просмотра во время рендеринга. Рекомендуется установить его в "авто", чтобы адаптировать масштаб в соответствии с мобильным устройством.
minScale	количество	Значение по умолчанию — 0,25, минимальное значение, которое может принимать шкала.
maxScale	количество	Значение по умолчанию — 10, максимальное значение, которое может принимать шкала.
isShowHeader	Логическое значение	Значение по умолчанию — true.Для яркого отображения, когда значение равно true, используется стиль заголовка по умолчанию. Установите значение false, чтобы удалить этот стиль по умолчанию.
isShowFooter	Логическое значение	Значение по умолчанию — true.Для яркого отображения, когда значение равно true, используется стиль хвоста по умолчанию. Установите значение false, чтобы удалить этот стиль по умолчанию.
onDocumentComplete	функция	После загрузки файла PDF вы можете вывести подробную информацию о файле PDF с помощью этой функции. Конкретная информация об этой функции показана ниже.function type for details

onDocumentComplete **MobilePDFReader** свойство onDocumentComplete

тип: функция

function(totalPage,title,otherObj)

Параметры функции:

имя параметра	Типы	описывать
totalPage	количество	Указывает общее количество страниц в файле PDF.
title	нить	Название PDF-файла
otherObj	объект	Дополнительная информация о расширении или кодировке для файлов PDF

Меры предосторожности

Значение масштаба по умолчанию — «авто». Настоятельно рекомендуется установить значение масштаба «авто», чтобы значение масштаба можно было адаптивно изменять в соответствии с размером мобильного устройства.

вариант разработчика

React (16.x)
Webpack (4.x)
Typescript (3.x)
Hot Module Replacement (HMR) using React Hot Loader (4.x)
Babel (7.x)
Less
React-css-modulesusing css-modules
Jest - Testing framework for React applications
Production build script
Image loading/minification using Image Webpack Loader
Typescript compiling using Typescript Loader (5.x)
Code quality (linting) for Typescript and LESS/CSS.

Установить

Clone/download repo
yarn install (or npm install for npm)

использовать

Development

yarn run start-dev

Build app continuously (HMR enabled)
App served @ http://localhost:8080

Production

yarn run start-prod

Build app once (HMR disabled)
App served @ http://localhost:3000

список команд

Command	Description
`yarn run start-dev`	Build app continuously (HMR enabled) and serve @ `http://localhost:8080`
`yarn run start-prod`	Build app once (HMR disabled) and serve @ `http://localhost:3000`
`yarn run build`	Build app to `/dist/`
`yarn run test`	Run tests
`yarn run lint`	Run Typescript and SASS linter
`yarn run lint:ts`	Run Typescript linter
`yarn run lint:sass`	Run SASS linter
`yarn run start`	(alias of `yarn run start-dev`)

Note: replace yarn with npm if you use npm.