react中使用pdf和图片预览遇到的一些坑,有啥问题欢迎留言一起讨论

需求

近期项目中新需求要用到pdf和图片的预览功能,由于项目时间较久,react用的是15.5.4版本,项目接口返回的数据是文件流。

使用插件

这里使用react-pdf预览pdf,图片直接使用img标签

因为react版本是15.5.4,所以不能使用最新版,这里使用的的是 react-pdf@3.0.6,这个是3版本的最后一个版本

ract-images使用的最新版

安装

1
npm i -S react-pdf@3.0.6

遇到的坑

  • pdf预览的时候 浏览器控制台 network 有个 pdfjs.worker.js 报红 404
    查看react-pdf文档,1、需要安装 pdfjs-dist,2、忽略pdfjs.worker.js

试了第一种方法,没啥用,仍然报错,所以使用第二种方法

1
import { Document } from 'react-pdf/dist/entry.noworker'
  • 解决了上面的问题之后,使用本地pdf文件试了正常,完美。。。然而,换了线上地址之后,又双叒叕 报错了

Unexpected server response (500) while retrieving PDF

这个问题是由于请求的时候没有发送验证token,无权限导致的,查看了react-pdf的github文档,发现填写链接的file属性可以是一个对象,对象中可以添加请求头信息

  • Page标签只能显示一个页面,无法展示全部的页面
    加载成功后使用onDocumentLoadSuccess方法获取总页数,然后循环一下,展示出每一页

搞定,附上 代码

页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import React, {Component} from 'react'
import { Page } from 'react-pdf'
import { Document } from 'react-pdf/dist/entry.noworker'

class FilePreview extends Component {

constructor (props) {
super(props)
this.state = {
numPages: null, //pdf总页数
pageNumber: 1 // pdf当前页
}
}

onDocumentLoadSuccess = ({ numPages }) => {
this.setState({ numPages })
}

render () {

const pdf = Util.getPreviewUrl(fileId, applyId)

if (fileType === 'images') {
return (
<div style={ {width: '100%', height: '100%', padding: '0 5rem 1rem'} }>
<img src={imageUrl} /> // 图片的url,可以是文件链接,也可以是文件流
</div>
)
} else if (fileType === 'pdf') {

return (
<div className='pdf-preview' style={ { textAlign: 'center' } }>
<Document
className='pdf'
file={ {url: pdf, httpHeaders: { 'Authorization': `Bearer ${token}` }, withCredentials: true} }
loading=""
onLoadSuccess={this.onDocumentLoadSuccess}
>
{ new Array(numPages).fill(' ').map((e, i) => {
return (
<Page
className='page'
key={i}
pageNumber={i + 1} //当前页页码
width={1000}
/>
)
})}
</Document>
</div>
)
} else {
return <div>附件不可预览</div>
}
}
}

export default FilePreview