在React项目中,我们经常需要使用PDF组件来展示PDF文件。本文将介绍如何在React项目中安装和使用react-pdf依赖包,并提供PC端和H5移动端的使用方法。
1、在react项目中安装react-pdf依赖包
建议安装8.0.2版本的react-pdf,如果安装更高版本的可能出现一些浏览器的兼容性问题。
1、PC端的使用
1.1、封装一个组件:PdfViewModal.tsx
1.2、业务代码中引入该组件
2、H5移动端的使用
移动端加入放大、缩小、上一页、下一页的功能。
2.1、封装一个组件:PDFViwer.tsx
2.2、业务代码中引入该组件
效果图:
注意:挡在本地开发时,如果预览的pdf文件地址是线上地址,则会报跨域的问题,需要服务端解决跨域问题。