在react中预览pdf文件插件之react-pdf（react-pdf）

相信大家都知道pdf，那么我们怎么能在浏览器中直接预览pdf格式的文件呢？

react-pdf

插件git地址：https://github.com/intelllex/react-pdf?tab=readme-ov-file，详细的安装请参考。

但是作者本人并不是用的这个

而且另外一个

https://www.npmjs.com/package/react-pdf。

话不多说：直接上代码。

import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import { InputNumber, Space, Spin, Tooltip } from 'antd';
import { LeftOutlined, RightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import './index.less';
const prefixCls = 'xt-knowledge-upload-file-preview-pdf';
const FilePreviewPdf = props => {
	const { fileInfo } = props;
	const [pageCurrent, setPageCurrent] = useState(1);
	const pageCurrentRef = useRef(pageCurrent);
	const [pageWidth, setPageWidth] = useState(760);
	const pageWidthRef = useRef(pageWidth);
	const [pageTotal, setPageTotal] = useState(1);
	const pageTotalRef = useRef(pageTotal);
	const onDocumentLoadSuccess = args => {
		setPageTotal(args.numPages);
		pageTotalRef.current = args.numPages;
	};
	const prevPage = () => {
		if (pageCurrentRef.current === 1) {
			return false;
		}
		setPageCurrent(pageCurrentRef.current - 1);
		pageCurrentRef.current = pageCurrentRef.current - 1;
	};

	const nextPage = () => {
		if (pageCurrentRef.current === pageTotalRef.current) {
			return;
		}
		setPageCurrent(pageCurrentRef.current + 1);
		pageCurrentRef.current = pageCurrentRef.current + 1;
	};

	const pageNumChange = e => {
		setPageCurrent(e);
		pageCurrentRef.current = e;
	};

	const toPage = e => {
		const value = Number(e.target.value);
		let valueCopy = value;

		if (value <= 0) {
			valueCopy = 1;
		} else if (value >= pageTotalRef.current) {
			valueCopy = pageTotalRef.current;
		} else {
			valueCopy = value;
		}
		setPageCurrent(valueCopy);
		pageCurrentRef.current = valueCopy;
	};

	const pageZoomOut = () => {
		if (pageWidthRef.current <= 560) {
			return false;
		}
		const pageWidth = pageWidthRef.current * 0.8;
		setPageWidth(pageWidth);
		pageWidthRef.current = pageWidth;
	};

	const pageZoomIn = () => {
		const pageWidth = pageWidthRef.current * 1.2;
		setPageWidth(pageWidth);
		pageWidthRef.current = pageWidth;
	};
	return (
		<div className={`${prefixCls}`}>
			<div className={`${prefixCls}-pageContainer`}>
				<Document file={fileInfo?.pdfUrl} onLoadSuccess={onDocumentLoadSuccess} loading={<Spin size='large' />}>
					<Page pageNumber={pageCurrent} width={pageWidth} loading={<Spin size='large' />} />
				</Document>
			</div>

			<div className={`${prefixCls}-pageTool`}>
				<Space>
					<Tooltip title={pageCurrent === 1 ? '已是第一页' : '上一页'}>
						<LeftOutlined onClick={prevPage} />
					</Tooltip>
					<InputNumber
						type='number'
						value={pageCurrent}
						onChange={pageNumChange}
						onPressEnter={toPage}
						min='1'
						max={pageTotal}
					/>{' '}
					/ {pageTotal}
					<Tooltip title={pageCurrent === pageTotal ? '已是最后一页' : '下一页'}>
						<RightOutlined onClick={nextPage} />
					</Tooltip>
					<Tooltip title='放大'>
						<ZoomInOutlined onClick={pageZoomIn} />
					</Tooltip>
					<Tooltip title='缩小'>
						<ZoomOutOutlined onClick={pageZoomOut} />
					</Tooltip>
				</Space>
			</div>
		</div>
	);
};
FilePreviewPdf.propTypes = {
	fileInfo: PropTypes.object,
};
export default FilePreviewPdf;

我这里是链接地址，返回的是pdf流，直接放在插件上就能预览了。