-
Notifications
You must be signed in to change notification settings - Fork 0
/
pdf.js
105 lines (95 loc) · 2.49 KB
/
pdf.js
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React, { Component } from 'react'
import { AutoSizer, List } from 'react-virtualized'
class Page extends Component {
componentDidMount() {
this.renderPDF()
}
renderPDF = async () => {
const { pdf, pageNumber, pageWidth, pageHeight, scale, } = this.props
const page = await pdf.getPage(pageNumber)
const viewport = page.getViewport(scale)
const canvas = this.refs.page
const context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
page.render({
canvasContext: context,
viewport: viewport,
})
}
render() {
const { index, style, } = this.props
return (
<div className='watermark-layer' key={index} style={style}>
<canvas ref='page'></canvas>
</div>
)
}
}
export default class PDFViewer extends Component {
state = {
pdf: null,
numPages: 0,
pageWidth: 0,
pageHeight: 0,
scale: 0,
}
style = {
minHeight: '100vh',
}
async componentDidMount() {
const { file } = this.props
const pdf = await PDFJS.getDocument(file)
const { numPages } = pdf
const { pageWidth, pageHeight, scale } = await this.getSize(pdf)
this.setState({ pdf, numPages, pageWidth, pageHeight, scale, })
}
getSize = async (pdf, full) => {
const page = await pdf.getPage(1)
const { width, height } = page.getViewport(1)
const { pdfdiv } = this.refs
let pageWidth, pageHeight, scale
if (full) {
pageWidth = pdfdiv.clientWidth
pageHeight = pageWidth * height / width
scale = pageWidth / width
} else {
pageHeight = pdfdiv.clientHeight
pageWidth = pageHeight * width / height
scale = pageWidth / width
}
return {
pageWidth,
pageHeight,
scale,
}
}
render() {
const { pdf, numPages, pageWidth, pageHeight, scale, } = this.state
return (
<div ref='pdfdiv' style={this.style}>
<List
style={{ margin: '0 auto' }}
width={pageWidth}
height={pageHeight}
rowHeight={pageHeight}
rowCount={numPages}
rowRenderer={({ index, style, }) => {
return (
<Page
key={index}
index={index}
style={style}
pdf={pdf}
pageNumber={index + 1}
pageWidth={pageWidth}
pageHeight={pageHeight}
scale={scale}
/>
)
}}
/>
</div>
)
}
}