内容简介:PC端的浏览器对于PDF文件的展示没有太大的问题,给定一个PDF的链接,就可以用浏览器默认的展示样式来展示和渲染PDF文件的内容。比如一个"使用React16.5编写的组件,用于在移动设备和PC端显示和渲染PDF文件(在你的项目中比如先引入react,且必须保证React的版本必须在15.0以上)
PC端的浏览器对于PDF文件的展示没有太大的问题,给定一个PDF的链接,就可以用浏览器默认的展示样式来展示和渲染PDF文件的内容。比如一个" www.baidu.com/test/pdf "。 如何在移动端展示这个文件。为了在移动端展示和渲染PDF文件的内容,本文在pdfjs的基础上实现了一个简单的react组件,用于展示和渲染PDF文件。
-
将这个react组件,以npm包的形式发布。
-
这个组件的项目地址为: github.com/fortheallli… (如果想看使用的例子,直接下载这个代码或者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 .
:seedling: PDFReader
import { PDFReader } from 'react-read-pdf' ... <PDFReader url={"http://localhost:3000/test.pdf"} ...> 复制代码
PDFReader组件中的属性
属性名称 | 类型 | 描述 |
---|---|---|
url | 字符串或者对象 | 如果是字符串,那么url表示的是PDF文件的绝对或者相对地址,如果是对象,可以看关于对象属性的具体描述- > |
data | 字符串 | 用二进制来描述的PDF文件,在javascript中,我们可以通过“atob”,将base64编码的PDF文件,转化为二进制编码的文件。 |
page | 数字 | 默认值为1,表示应该渲染PDF文件的第几页 |
scale | 数字 | 决定渲染的过程中视口的大小 |
width | 数字 | 决定渲染过程中,视口的宽度 |
showAllPage | 布尔值 | 默认是false,表示不会一次性渲染,只会渲染page的值所指定的那一页。如果这个值为true,则一次性渲染PDF文件所有的页 |
onDocumentComplete | 函数 | 将PDF文件加载后,可以通过这个函数输出PDF文件的详细信息。这个函数的具体信息如下所示。 |
** PDFReader **组件的url属性
类型:
- string : 字符串,表示PDF文件的绝对或者相对地址
- object : 对象,有下列的属性
属性:
属性名 | 类型 | 描述 |
---|---|---|
url | 字符串 | 字符串,表示PDF文件的绝对或者相对地址 |
withCredentials | 布尔值 | 决定请求是否携带cookie |
** PDFReader **的onDocumentComplete属性
Type:
- function(totalPage)
onDocumentComplete的类型是一个函数, 这个函数的第一个参数表示的是PDF文件的总页数。
注意事项
PDFReader组件的url属性可以是字符串或者是对象。
下面两种方式都是被允许的。
其一是 :
<MobilePDFReader url="http://localhost:3000/test.pdf"/> 复制代码
另外一种方式是 :
<MobilePDFReader url={url:"http://localhost:3000/test.pdf"}/> 复制代码
:seedling: 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文件的详细信息。这个函数的具体信息如下所示。for details |
** 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-modules using 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
http://localhost:8080
Production
yarn run start-prod
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.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- React Suite 3.2.10 发布,用于后台产品的 React 组件库
- React Suite 3.2.10 发布,用于后台产品的 React 组件库
- React Suite 3.2.11 发布,用于后台产品的 React 组件库
- React Suite 3.2.11 发布,用于后台产品的 React 组件库
- React Suite 3.3.1 发布,用于后台产品的 React 组件库
- React Suite 3.3.1 发布,用于后台产品的 React 组件库
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。