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使用的最新版
安装
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 | import React, {Component} from 'react' |
- 本文链接:https://xuehuayu.cn/2020/04/03/react%E9%A2%84%E8%A7%88pdf%E5%92%8C%E5%9B%BE%E7%89%87%E9%81%87%E5%88%B0%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9D%91.html
- 版权声明:① 标为原创的文章为博主原创,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接。② 转载文章来自网络,已标明出处,侵删。