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
반응형