内容简介: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 组件库
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Text Processing in Python
David Mertz / Addison-Wesley Professional / 2003-6-12 / USD 54.99
Text Processing in Python describes techniques for manipulation of text using the Python programming language. At the broadest level, text processing is simply taking textual information and doing som......一起来看看 《Text Processing in Python》 这本书的介绍吧!