Pdfjs-tools NPM

pdfjs-tools

install

pnpm i pdfjs-tools --save

pdf 预览标注组件

import { useRef } from 'react';
import { Button } from 'antd';
// import PDFTool, { PDFToolsProps, CallbackRef } from 'pdfjs-tools';
import PDFTool, { PDFToolsProps, CallbackRef, LEFT_LAYER } from '@/components/PDFTools';

const AccessPage: React.FC = () => {
	const toolsRef = useRef<CallbackRef>();
	const pDFToolsProps: PDFToolsProps = {
		pdfUrl: require('./assets/demo.pdf'),
		imageList: [require('./assets/sign.png')],
		signList: [
			require('./assets/seal.png')
			// require('./assets/sign.png'),
		],
		defalutLayerType: LEFT_LAYER.signature,
		// toolTypes: ['file', 'view', 'desc'],
		toolTypes: [],
		uploadParams: {
			baseUrl: '/api/sysFile/upload',
			successMsg: '上传成功！',
			callback: data => {
				console.log('上传成功', data);
			}
		},
		initCallback(ref) {
			toolsRef.current = ref.current!;
		}
	};

	return (
		<div style={{ height: '100vh' }}>
			<PDFTool {...pDFToolsProps} />
			<div style={{ position: 'absolute', bottom: 24, right: 24 }}>
				<Button
					style={{ marginRight: 12 }}
					onClick={() => {
						toolsRef.current?.savePdf();
					}}
				>
					下载
				</Button>
				<Button
					style={{ marginRight: 12 }}
					onClick={async () => {
						const base64 = await toolsRef.current?.getPdfBase64();
						console.log('base64', base64);
					}}
				>
					保存
				</Button>
				<Button
					style={{ marginRight: 12 }}
					onClick={() => {
						toolsRef.current?.uploadPdf();
					}}
				>
					上传
				</Button>
				<Button
					style={{ marginRight: 12 }}
					onClick={async () => {
						toolsRef.current?.printPdf();
					}}
				>
					打印
				</Button>
			</div>
		</div>
	);
};

export default AccessPage;