node.js/React.js

[React] react-pdf를 이용하여 pdf 띄우기 ( 페이징처리 x)

IT공부블로그 2020. 4. 7. 11:12
728x90
반응형
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { pdfjs } from 'react-pdf';
 
export class Test extends Component {
 
    viewerContainer = React.createRef();
    viewer = React.createRef();
 
    state = {
        numPages: null,
        pageNumber: 1,
    }
 
    async componentDidMount() {
 
        let container = this.viewerContainer.current;
        let viewer = this.viewer.current;
        console.log('pdfjs : ', pdfjs.GlobalWorkerOptions);
        const pdfjsWorker = await import('react-pdf/dist/pdf.worker.entry');
        pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
 
        let test = pdfjs.getDocument(this.props.file);
        test.promise.then((pdf) => {
 
            this.setState({numPages: pdf.numPages});
 
            this.pdfLinkService = new pdfjsViewer.PDFLinkService();
 
            this.pdfFindController = new pdfjsViewer.PDFFindController({
                linkService: this.pdfLinkService,
            });
 
 
            this.pdfViewer = new pdfjsViewer.PDFViewer({
                 container,
                 viewer,
                 linkService: this.pdfLinkService,
                 findController: this.pdfFindController
            });
            this.pdfLinkService.setViewer(this.pdfViewer);
 
            this.pdfViewer.setDocument(pdf);
            this.pdfLinkService.setDocument(pdf, null);
 
            this.pdfViewer.onePageRendered.then(() => {
                 pdf.getOutline().then((outline) => {
                     this.outline = outline || null;
 
                     if (!outline) {
                        return;
                     }
                     this.setState({bookmarkItems: outline});
                });
            });
        });
    }
 
    render(){
        return(
            <div>
                <div id="viewerContainer" ref={this.viewerContainer}>
                     <div id="viewer" ref={this.viewer} className="pdfViewer" />
                     <span>aaaaaaa</span>
                </div>
            </div>
        )
    }
}

cs


728x90
반응형