react预览pdf和图片遇到的一些坑

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

需求

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

使用插件

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

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

ract-images使用的最新版

安装

npm i -S react-pdf@3.0.6

遇到的坑

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

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

import { Document } from 'react-pdf/dist/entry.noworker'

• 解决了上面的问题之后，使用本地pdf文件试了正常，完美。。。然而，换了线上地址之后，又双叒叕 报错了

Unexpected server response (500) while retrieving PDF

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

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

---

搞定，附上 代码

页面代码

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