阅读数:

react项目中实现在线PDF文件展示

0

说明

最近在做一个项目,需求是要在移动客户端:安卓和ios上在线展现pdf文件,并支持上下分页。经过多方多次探索
实现的都不是很理想,要想在react项目(react+redux+router+webpack)中实现pdf加载并显示就这么费劲么?
最后的最后抱着试试看的心理在npm官方搜到了一款叫react-pdf的插件,
Use by adding . file can be an URL, base64 content, Uint8Array, and more.
看介绍应该可以实现吧,试试?

试试

  • 安装
    1
    npm install react-pdf --save
  • 引用

    1
    import ReactPDF from 'react-pdf'
  • usage

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

    1
    <ReactPDF file={temp} />

发现本地环境可以打开,但是有几个问题:
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
<ReactPDF file={temp} key="pdf" width={window.innerWidth * this.state.pdfscale}
onDocumentLoad={this.onDocumentLoad}
onPageLoad={this.onPageLoad} pageIndex={this.state.pdfcurrentIndx} scale={this.state.pdfscale}
loading={<LoadingView icon='loading' show={true} text='正在加载pdf'/>}/>
{this.state.pdftotal >= 2 &&
<div className="pdfnavbar">
<span onClick={this.nextpage.bind(this, -1)} className="pre"><img
src={this.state.pdfnav.left}/></span>
{this.state.pageNumber + '/' + this.state.pdftotal}
<span onClick={this.nextpage.bind(this, 1)} className="next"><img
src={this.state.pdfnav.right}/></span>
</div>
}

pdf1

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

1
2
3
4
5
6
7
8
G_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
5
pdfurl = data.match(/<iframe\s*.*?src="[a-zA-z]+:\/\/[^\s]*.pdf/);
if (pdfurl !== null) {
pdfurl = pdfurl[0].match(/[a-zA-z]+:\/\/[^\s]*.pdf/)[0].replace('http://xxxtest.yyyy.com',
'https://xxx.m.yyyy.com');
}

效果图

x1
pdf2
x1.2
pdf3
x1.5
pdf4


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


0
赏点咖啡钱^.^