发布一个react组件——react-read-pdf，用于在移动端展示PDF文件

[forthealllight]

发布一个react组件——react-read-pdf，用于在移动端展示PDF文件

---

PC端的浏览器对于PDF文件的展示没有太大的问题，给定一个PDF的链接，就可以用浏览器默认的展示样式来展示和渲染PDF文件的内容。比如一个"http://www.baidu.com/test/pdf"。 如何在移动端展示这个文件。为了在移动端展示和渲染PDF文件的内容，本文在pdfjs的基础上实现了一个简单的react组件，用于展示和渲染PDF文件。

• 将这个react组件，以npm包的形式发布。

• 这个组件的项目地址为：https://github.com/forthealllight/react-read-pdf
  （如果想看使用的例子，直接下载这个代码或者clone，然后npm install和npm start即可）

React-read-pdf

使用React16.5编写的组件，用于在移动设备和PC端显示和渲染PDF文件

特点

• Simple: 使用简单方便，仅仅是一个react组件
• 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,且必须保证React的版本必须在15.0以上)

安装react-read-pdf包

npm install --save react-read-pdf

在PC端建议使用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在iphoneX上展示PDF的一个例子。

文档

react-read-pdf 这个npm包主要包括了两个不同类型的组件 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中，我们可以通过“atob”,将base64编码的PDF文件，转化为二进制编码的文件。
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文件的总页数。

注意事项

PDFReader组件的url属性可以是字符串或者是对象。

下面两种方式都是被允许的。

其一是 :

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

另外一种方式是 :

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

🌱 MobilePDFReader

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

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

MobilePDFReader组件中的属性

属性名称	类型	描述
url	字符串	如果是字符串，那么url表示的是PDF文件的绝对或者相对地址
page	数字	默认值为1，表示应该渲染PDF文件的第几页
scale	数字或者“auto”	默认值为“auto”,决定渲染的过程中视口的大小，推荐设置成“auto”可以根据移动设备自适应的适配scale
minScale	数字	默认值0.25, scale可取的最小值
maxScale	数字	默认值10, scale可取的最大值
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文件的其他扩展或者编码信息

注意事项

scale的默认值为“auto”,强烈推荐将scale的值设置成“auto”，这样可以根据移动设备的大小自适应的改变scale的值。

开发者选项

• 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.

安装

1. Clone/download repo
2. 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.

[qhy90223]

您好，使用umi2.0环境，安装react-read-pdf依赖后，无法引入组件，显示没有MobilePDFReader和 PDFReader

[forthealllight]

您好，使用umi2.0环境，安装react-read-pdf依赖后，无法引入组件，显示没有MobilePDFReader和 PDFReader

请更新到最新2.0.7哦 ，npm i -s react-read-pdf@2.0.7

[lifbliu]

我们现在是低版本react（15.4.2），请问要安装的react-read-pdf依赖的版本是多少？

[forthealllight]

我们现在是低版本react（15.4.2），请问要安装的react-read-pdf依赖的版本是多少？

不好意思。。。不支持16.0以下。。。

[jiajianrong]

我记得直接用一个iframe src="https://domain.com/a.pdf" 就可以使用浏览器自带的pdf查看功能，不知道你的和浏览器的实现有区别吗？

[forthealllight]

我记得直接用一个iframe src="https://domain.com/a.pdf" 就可以使用浏览器自带的pdf查看功能，不知道你的和浏览器的实现有区别吗？

在pc端基本上没问题，可以自带查看功能，我针对的是移动端，移动端的浏览器是不会自带pdf查看功能的，android的话默认下载，ios的话有部分浏览器是可以自带查看的。

[wangweiruning]

你好，请问一下PDF过大加载不出来，这个要怎么解决

[forthealllight]

你好，请问一下PDF过大加载不出来，这个要怎么解决

你的pdf有多大，我这个其实是按页加载的，应该是可以用的

[wangweiruning]

我的PDF主要是图片展示的http://health.arvate-top.com/data/%E4%BD%8F%E9%99%A2%E5%9E%AB%E4%BB%98%E6%9C%8D%E5%8A%A1%E6%A1%88%E4%BE%8B.pdf

[forthealllight]

我的PDF主要是图片展示的http://health.arvate-top.com/data/%E4%BD%8F%E9%99%A2%E5%9E%AB%E4%BB%98%E6%9C%8D%E5%8A%A1%E6%A1%88%E4%BE%8B.pdf

如果仅仅在pc端，你直接用一个iframe引进来就行了，不需要用我这个npm 包

[haoshuangfeng]

移动端上设置的宽度能配置吗

[forthealllight]

移动端上设置的宽度能配置吗

设置父元素div的宽度就可以了

[haoshuangfeng]

移动端上设置的宽度能配置吗

设置父元素div的宽度就可以了

设置后没生效：

设置后的效果：

[StevenZhangHl]

url放服务器的pdf地址怎么显示不出来呢

[StevenZhangHl]

为什么我的pdf在手机上显示的位置这么奇葩，就在那一小块，而且head和foot的区域巨大，这张图是我把head和foot隐藏后的效果

[forthealllight]

为什么我的pdf在手机上显示的位置这么奇葩，就在那一小块，而且head和foot的区域巨大，这张图是我把head和foot隐藏后的效果

改一下样式呗

[adu022]

我这样放的url，报跨域错误怎么处理呢？但是使用PDFReader就不会报错