共计 4016 个字符，预计需要花费 11 分钟才能阅读完成。
PC 端的浏览器对于 PDF 文件的展示没有太大的问题，给定一个 PDF 的链接，就可以用浏览器默认的展示样式来展示和渲染 PDF 文件的内容。比如一个 ”http://www.baidu.com/test/pdf”。如何在移动端展示这个文件。为了在移动端展示和渲染 PDF 文件的内容，本文在 pdfjs 的基础上实现了一个简单的 react 组件，用于展示和渲染 PDF 文件。
将这个 react 组件，以 npm 包的形式发布。
这个组件的项目地址为：https://github.com/forthealll…
（如果想看使用的例子，直接下载这个代码或者 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 的一个例子。<img src=”https://raw.githubusercontent…; width=”320″>
文档
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.
安装
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.