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

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.???? PDFReaderimport { 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布尔值决定请求是否携带cookieonDocumentComplete PDFReader的onDocumentComplete属性Type:function(totalPage)onDocumentComplete的类型是一个函数, 这个函数的第一个参数表示的是PDF文件的总页数。注意事项PDFReader组件的url属性可以是字符串或者是对象。下面两种方式都是被允许的。其一是 : <MobilePDFReader url=“http://localhost:3000/test.pdf”/>另外一种方式是 : <MobilePDFReader url={url:“http://localhost:3000/test.pdf”}/>???? MobilePDFReaderimport { 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)LessReact-css-modulesusing css-modulesJest - Testing framework for React applicationsProduction build scriptImage loading/minification using Image Webpack LoaderTypescript compiling using Typescript Loader (5.x)Code quality (linting) for Typescript and LESS/CSS.安装Clone/download repoyarn install (or npm install for npm)使用Developmentyarn run start-devBuild app continuously (HMR enabled)App served @ http://localhost:8080Productionyarn run start-prodBuild app once (HMR disabled)App served @ http://localhost:3000指令列表CommandDescriptionyarn run start-devBuild app continuously (HMR enabled) and serve @ http://localhost:8080yarn run start-prodBuild app once (HMR disabled) and serve @ http://localhost:3000yarn run buildBuild app to /dist/yarn run testRun testsyarn run lintRun Typescript and SASS linteryarn run lint:tsRun Typescript linteryarn run lint:sassRun SASS linteryarn run start(alias of yarn run start-dev)Note: replace yarn with npm if you use npm.