pdfjs-tools
v1.0.9
Published
pdf预览标注组件
Downloads
5
Readme
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;
1.0.2
初始化功能 目录、上传、下载 pdf 上一页、下一页、全屏 图片、画笔、文字
1.0.6
新增打印功能
1.0.8
新增工具显示隐藏等