antd 实现pdf 预览_react项目中实现在线PDF文件展示

说明

最近在做一个项目，需求是要在移动客户端：安卓和ios上在线展现pdf文件，并支持上下分页。经过多方多次探索

实现的都不是很理想，要想在react项目(react+redux+router+webpack)中实现pdf加载并显示就这么费劲么？

最后的最后抱着试试看的心理在npm官方搜到了一款叫react-pdf的插件，

Use by adding . file can be an URL, base64 content, Uint8Array, and more.

看介绍应该可以实现吧，试试？

试试安装1npm install react-pdf --save

引用

1import ReactPDF from 'react-pdf'

usage

我们先用本地文件试试，temp=’./sample.pdf’.

1

发现本地环境可以打开，但是有几个问题：

1、只能显示一页，不能翻页；

2、手机页面显示太小，看不清楚；

3、当连上Url网络pdf资源时，跨域问题；

4、应用站点是https的，但是pdf url资源是http的，跨协议问题；

5、原接口返回的是html含 iframe dom结构的字符串，没法直接提取url地址

解决

针对上述几个问题，我们一个一个进行解决

1、看官方api，支持pageindex设置，所以我们可以设计两个按钮去实现翻页或者利用harmmerjs手势上线触屏分页，根据UI设计我们最终用按钮分页。

1

2

3

4

5

6

7

8

9

10

11

12

13

onDocumentLoad={this.onDocumentLoad}

onPageLoad={this.onPageLoad} pageIndex={this.state.pdfcurrentIndx} scale={this.state.pdfscale}

loading={}/>

{this.state.pdftotal >= 2 &&

src={this.state.pdfnav.left}/>

{this.state.pageNumber + '/' + this.state.pdftotal}

src={this.state.pdfnav.right}/>

}

2、我们利用点击事件，对原pdf进行1、1.2、1.5倍率进行轮询放大；

1

2

3

4

5

6

7

8G_ClickNum=0;

togglePDFScsle() {

G_ClickNum++;

this.setState({

clickNum: G_ClickNum,

pdfscale: G_Pdfscale[G_ClickNum % 3],

});

}

3、临时修改本地host文件；

4、利用nginx，搭建https转发代理，前端url调用改为nginx代理的https站点；

5、使用正则表达式，对pdf进行提取

1

2

3

4

5pdfurl = data.match(/

if (pdfurl !== null) {

pdfurl = pdfurl[0].match(/[a-zA-z]+:\/\/[^\s]*.pdf/)[0].replace('http://xxxtest.yyyy.com',

'https://xxx.m.yyyy.com');

}

效果图

x1

x1.2

x1.5

^-^欢迎回复交流^-^