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
(ornpm 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.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。