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

栏目: IOS · Android · 发布时间: 6年前

内容简介: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组件——react-read-pdf,用于在移动端展示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的值。

开发者选项

安装

  1. Clone/download repo
  2. yarn install (or npm 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.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

思想的未来

思想的未来

(美)劳伦斯﹒莱斯格 / 李旭 / 中信出版社 / 2004-10 / 29.00元

因特网革命已到来,一些人说它已经过去,革命缘何而来?又缘何而去呢? 劳伦斯·莱斯格对因特网革命中为何会出现一种反革命的破坏性力量及后果做出了解释。创作之所以繁荣,是因为因特网保护了创新的公共资源。是因为因特网保护了创新的公共资源。因特网的独特设计营造出一个中立的平台。最广大范围的作者们可在此平台上进行试验。围绕此平台的法律架构对这一自由空间给予了保护,以使文化和信息——我们这个时代的......一起来看看 《思想的未来》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具