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

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

需求

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

使用插件

这里使用react-pdf插件和react-images插件

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

ract-images使用的最新版

安装

npm i -S react-pdf@3.0.6 ract-iamges

遇到的坑

• 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

  这个问题是由于没有权限，由于链接是直接写在<Document file={url}/>标签中，无法卸载请求头和cookie，查看react-pdf的github文档，发现file可以是一个对象。对象中可以添加请求头和cookie相关信息。

点击这里查看代码