如何解决将注释添加到react-pdf,并获取关于pdf
我有一个要求,我必须在画布中打开一个现有的pdf,并在pdf中绘制可调整大小和可拖动的矩形,并获取绘制的这些矩形的坐标。 这是我显示pdf的代码。
import React,{ PureComponent } from "react";
import { Document,Page,pdfjs } from "react-pdf/dist/entry.webpack";
import PdfComponents from "../../../Components/PdfComponents/PdfComponent";
import "./PDFdemo.css";
import requiredFile from "./test_form.pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${
pdfjs.version
}/pdf.worker.js`;
export default class PdfViewer extends PureComponent {
state = {
numPages: null,pageNumber: 1,rotate: 0,scale: 1
};
onDocumentLoadSuccess = ({ numPages }) => {
console.log('this function was triggered')
this.setState({ numPages });
};
render() {
const { pageNumber,scale,pdf } = this.state;
console.log("pdf",pdf);
return (
<React.Fragment>
<div className="myDoc">
<div>
<PdfComponents />
</div>
<div id="ResumeContainer">
<div className="canvasstyle">
<Document
className="PDFDocument"
file={requiredFile}
onLoadError={(error) => {
console.log("Load error",error)
}}
onSourceSuccess={() => {
console.log("Source success")
}}
onSourceError={(error) => {
console.error("Source error",error)
}}
onLoadSuccess={this.onDocumentLoadSuccess}
>
{window === undefined ? <div>nothing here</div> : <Page
pageNumber={pageNumber}
className="pdfpage pdfpageOne"
scale={scale}
>
</Page>}
</Document>
</div>
</div>
</div>
</React.Fragment>
);
}
}
import React from 'react';
import "./pdfComponent.css";
import ResizableRect from 'react-resizable-rotatable-draggable'
class PDFComponent extends React.Component {
constructor() {
super()
this.state = {
width: 100,height: 100,top: 100,left: 100,rotateAngle: 0
}
}
handleResize = (style,isShiftKey,type) => {
// type is a string and it shows which resize-handler you clicked
// e.g. if you clicked top-right handler,then type is 'tr'
let { top,left,width,height } = style
top = Math.round(top)
left = Math.round(left)
width = Math.round(width)
height = Math.round(height)
this.setState({
top,height
})
}
handleDrag = (deltaX,deltaY) => {
this.setState({
left: this.state.left + deltaX,top: this.state.top + deltaY
})
}
render() {
const { width,top,height,rotateAngle } = this.state
return (
<div className="cursor">
<ResizableRect
id="parameters"
left={left}
top={top}
width={width}
height={height}
rotateAngle={rotateAngle}
// aspectRatio={false}
// minWidth={10}
// minHeight={10}
zoomable='n,w,s,e,nw,ne,se,sw'
// rotatable={true}
// onRotateStart={this.handleRotateStart}
onRotate={this.handleRotate}
// onRotateEnd={this.handleRotateEnd}
// onResizeStart={this.handleResizeStart}
onResize={this.handleResize}
// onResizeEnd={this.handleUp}
// onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
// onDragEnd={this.handleDragEnd}
/>
</div>
);
}
}
export default PDFComponent;
我需要将此矩形放置在pdf上并获取其坐标。 还有其他方法可以在pdf中绘制矩形并获取其坐标吗?
感谢所有帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。