react-pdf预览在线PDF的使用

小静妈 發表於 2024-9-14 16:38:00

<h3>1、在react项目中安装react-pdf依赖包</h3>
建议安装8.0.2版本的react-pdf，如果安装更高版本的可能出现一些浏览器的兼容性问题；
<div class="cnblogs_code">
<pre>npm install react-pdf@8.0.2 -S</pre>
</div>
 
<h3>1、PC端的使用</h3>
<h4>1.1、封装一个组件：PdfViewModal.tsx</h4>
<div class="cnblogs_code">
<pre>import React, { useState } from 'react'
import { Modal, Spin, Alert } from 'antd'
import { Document, Page, pdfjs } from 'react-pdf'
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css';

// 配置 PDF.js 的 worker 文件
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString()

interface PDFPreviewModalProps {
fileName: string | null
fileUrl: string | null // 传入的 PDF 文件地址
onCancel: () => void // 关闭弹框的回调
}

const PDFPreviewModal: React.FC<PDFPreviewModalProps> = ({ fileName, fileUrl, onCancel }) => {
const = useState<number | null>(null)
const = useState<number>(600) // 默认宽度为 600px
const = useState<boolean>(true) // 控制加载状态
const = useState<boolean>(false) // 控制加载错误状态

// 当 PDF 加载成功时，设置页面数量
const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
setNumPages(numPages)
setLoading(false) // 加载成功后，隐藏 loading
}

// 加载失败时，设置错误状态
const onDocumentLoadError = () => {
setLoading(false)
setError(true) // 出错时显示错误提示
}

// 获取 PDF 页面加载后的宽度
const onPageLoadSuccess = ({ width }: { width: number }) => {
setPdfWidth(width)
}

return (
<Modal
 title={`【${fileName}】预览`}
 open
 onCancel={onCancel}
 footer={null}
 width={pdfWidth + 100}
 style={{ top: 20 }}
>
 {error ? (
 <Alert message="加载 PDF 文件失败" type="error" showIcon />
 ) : (
 <>
 {loading && (
 <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '80vh' }}>
 <Spin size="large" />
 </div>
 )}
 {fileUrl && (
 <>
 <div style={{ height: '88vh', overflowY: 'auto', padding: '24px' }}>
 <Document
 //file={new URL('/public/temp/DXF文件要求.pdf',import.meta.url).toString()}
 file={fileUrl}
 onLoadSuccess={onDocumentLoadSuccess}
 onLoadError={onDocumentLoadError}
 >
 {Array.from(new Array(numPages), (el, index) => (
 <Page key={`page_${index + 1}`} pageNumber={index + 1} onLoadSuccess={onPageLoadSuccess} />
 ))}
 </Document>
 </div>
 </>
 )}
 </>
 )}
</Modal>
)
}

export default PDFPreviewModal</pre>
</div>
<h4>1.2、业务代码中引入该组件</h4>
<div class="cnblogs_code">
<pre>import React, { useState, useEffect, useCallback } from 'react'
import { Form } from 'antd'
import { List } from 'antd'
import PDFPreviewModal from '@/components/PdfViewModal.tsx'

const PdfTest = (props: any) => {
const = useState<any>() const onTestPdf = () => { 　　setPreviewFile({ 　　　　fileName: 'abc.pdf', 　　　　fileUrl: 'http://****/abc.pdf' 　　}) }return (
<div className="mrUp mrLink"> 　　　<div onClick={onTestPdf}>测试预览PDF</div> 
 {!!previewFile?.publicFileUrl && (
 <PDFPreviewModal
 fileName={previewFile?.fileName}
 fileUrl={previewFile?.publicFileUrl}
 onCancel={() => setPreviewFile('')}
 />
 )}
</div>
)
}

export default PdfTest</pre>
</div>
<h3>2、H5移动端的使用</h3>
移动端加入放大、缩小、上一页、下一页的功能；
<h4>2.1、封装一个组件：PDFViwer.tsx</h4>
<div class="cnblogs_code">
<pre>import React, { useState } from 'react';
import { Button, Modal, Space, Toast, Divider } from 'antd-mobile'
import { UpOutline, DownOutline, AddCircleOutline, MinusCircleOutline } from 'antd-mobile-icons'
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; // 样式导入
import 'react-pdf/dist/esm/Page/TextLayer.css'

// 配置 PDF.js 的 worker 文件
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString()

interface PDFPreviewModalProps {
fileUrl: string | null; // 传入的 PDF 文件地址
}

const styleBtnDv = {
display: 'flex',
justifyContent: 'center',
height: '1rem',
alignItems: 'center',
gap: '0.4rem',
margin: '0.3rem 1rem',
padding: '0 0.6rem',
background: '#444',
borderRadius: '0.5rem'
}

const styleBtn = {
flex: 1,
display: 'flex',
justifyContent: 'center',
height: '0.6rem',
alignItems: 'center',
}

// PDF预览功能
const PDFViwer: React.FC<PDFPreviewModalProps> = ({ fileUrl }) => {
const = useState(1);
const = useState(1);
const = useState(0.65);

// 当 PDF 加载成功时，设置页面数量
const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
setNumPages(numPages);
};

//上一页
function lastPage() {

if (pageNumber == 1) {
 Toast.show({
 content: '已是第一页'
 })
 return;
}
const page = pageNumber - 1;
setPageNumber(page);
}
//下一页
function nextPage() {
if (pageNumber == numPages) {
 Toast.show("已是最后一页");
 return;
}
const page = pageNumber + 1;
setPageNumber(page);
}
//缩小
function pageZoomOut() {
if (scale <= 0.3) {
 Toast.show("已缩放至最小");
 return;
}
const newScale = scale - 0.1;
setScale(newScale);
}

//放大
function pageZoomIn() {
if (scale >= 5) {
 Toast.show("已放大至最大");
 return;
}
const newScale = scale + 0.1;
setScale(newScale);
}

return (
<div>
 {/* 预览 PDF 文件 */}
 {fileUrl ? (
 <div style={{ height: 'calc(100vh - 4.5rem)', overflowY: 'auto', padding: '24px' }}>
 <Document
 // 写死的pdf文件地址，用于本地测试使用，打包提交前需要注释掉
 // file={new URL("/public/temp/AI销售助手-宽带&套餐&战新.pdf", import.meta.url).toString()}
 // 真实传入的pdf地址
 file={fileUrl}
 onLoadSuccess={onDocumentLoadSuccess}
 >
 <Page pageNumber={pageNumber} scale={scale} />
 </Document>
 </div>
 ) : (
 没有选择文件
 )}
 <div style={styleBtnDv}>
 <div style={styleBtn} onClick={lastPage}><UpOutline color='#fff' fontSize={'0.6rem'} /></div>
 <div style={{ color: '#fff', fontSize: '0.35rem', ...styleBtn }}>{pageNumber}/{numPages}</div>
 <div style={styleBtn} onClick={nextPage}><DownOutline color='#fff' fontSize={'0.6rem'} /></div>
 <div style={styleBtn} onClick={pageZoomIn}><AddCircleOutline color='#fff' fontSize={'0.6rem'} /></div>
 <div style={styleBtn} onClick={pageZoomOut}><MinusCircleOutline color='#fff' fontSize={'0.6rem'} /></div>
 </div>
</div>
);
};

export default PDFViwer;</pre>
</div>
<h4>2.2、业务代码中引入该组件</h4>
<div class="cnblogs_code">
<pre>import React, { useMemo, useRef, useState } from 'react'
import { ErrorBlock, Swiper, SwiperRef, Popup, } from 'antd-mobile'
import PDFViwer from '@/components/PDFViwer';

const ellipsis1 = {
"white-space": "nowrap",
"overflow": "hidden",
"text-overflow": "ellipsis",
}

const IntroduceDocList = (props: any) => {
const { loading, introduceDocList } = props
// const introduceDocList = [
// {publicFileUrl: '/public/temp/DXF文件要求.pdf', fileName:'DXF文件要求.pdf'},
// {publicFileUrl: '/public/temp/AI销售助手-宽带&套餐&战新.pdf', fileName:'AI销售助手-宽带&套餐&战新.pdf'},
// ] </pre>
<pre>const [introduceDocList, setIntroduceDocList] = useState({ 　　{publicFileUrl: 'http://****/abc.pdf', fileName:'abc.pdf'}, {publicFileUrl: 'http://****/def.pdf', fileName:'def.pdf'}, }); 
const = useState({ id: 1 });
const = useState(false)

const onOpenPdfViewer = (item) => {
console.log(item);
setPdf(item);
setShowPdfViwer(true);
}

return (
 <div>
 {
 introduceDocList?.map(item => (
 <div data-url={item?.publicFileUrl} style={{ marginBottom: '0.3rem', fontSize: '0.4rem' }}>
 onOpenPdfViewer(item)}>{item.fileName}
 </div>
 ))
 }
 <Popup
 position='right'
 visible={showPdfViwer}
 showCloseButton
 bodyStyle={{ width: '100%' }}
 destroyOnClose={true}
 onClose={() => {
 setShowPdfViwer(false)
 setPdf({ id: 1 })
 }}
 >
 <div style={{ padding: '0.3rem 1rem', fontSize: '0.35rem', fontWeight: 600, textAlign:'center', ...ellipsis1 }}>{pdf?.fileName}</div>
 <div style={{ height: '100%' }} data-url={pdf?.publicFileUrl}>
 <PDFViwer fileUrl={pdf?.publicFileUrl} />
 </div>
 </Popup>
 </div>
)
}
export default IntroduceDocList</pre>
</div>
<h3>效果图：</h3>
<img src="https://img2024.cnblogs.com/blog/1048036/202409/1048036-20240914163525510-1769916366.png">
 
注意：挡在本地开发时，如果预览的pdf文件地址是线上地址，则会报跨域的问题，需要服务端解决跨域问题。
  
来源：https://www.cnblogs.com/libo0125ok/p/18414292

頁: [1]

琼殿技术论坛's Archiver

react-pdf预览在线PDF的使用