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
106
107
108
109
110
111
112
|
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DocServer } from '../client/DocServer';
import { Doc } from '../new_fields/Doc';
import * as Pdfjs from "pdfjs-dist";
import "pdfjs-dist/web/pdf_viewer.css";
import { Utils } from '../Utils';
import { scale } from '../client/views/pdf/PDFViewer';
const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer");
const protoId = "protoDoc";
const delegateId = "delegateDoc";
class Test extends React.Component {
private _viewer: React.RefObject<HTMLDivElement> = React.createRef();
private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
private _pageSizes: Array<{ width: number, height: number }> = [];
_pdfViewer: PDFJSViewer.PDFViewer;
_pdfFindController: PDFJSViewer.PDFFindController;
_page: number = 0;
componentDidMount = () => {
let pdfUrl = Utils.CorsProxy("https://www.hq.nasa.gov/alsj/a17/A17_FlightPlan.pdf");
Pdfjs.getDocument(pdfUrl).promise.then(async pdf => {
if (this._mainCont.current) {
let simpleLinkService = new SimpleLinkService(this);
this._pdfViewer = new PDFJSViewer.PDFViewer({
container: this._mainCont.current,
viewer: this._viewer.current,
linkService: simpleLinkService
});
simpleLinkService.setPDFJSview(this._pdfViewer);
this._mainCont.current.addEventListener("pagesinit", () => {
this._pdfViewer.currentScaleValue = 1;
console.log(this._pdfViewer);
});
this._mainCont.current.addEventListener("pagerendered", () => console.log("rendered"));
this._pdfViewer.setDocument(pdf);
this._pageSizes = Array<{ width: number, height: number }>(pdf.numPages);
this._pdfFindController = new PDFJSViewer.PDFFindController(this._pdfViewer);
this._pdfViewer.findController = this._pdfFindController;
await Promise.all(this._pageSizes.map<Pdfjs.PDFPromise<any>>((val, i) =>
pdf.getPage(i + 1).then((page: Pdfjs.PDFPageProxy) => {
this._pageSizes.splice(i, 1, {
width: (page.view[page.rotate === 0 || page.rotate === 180 ? 2 : 3] - page.view[page.rotate === 0 || page.rotate === 180 ? 0 : 1]) * scale,
height: (page.view[page.rotate === 0 || page.rotate === 180 ? 3 : 2] - page.view[page.rotate === 0 || page.rotate === 180 ? 1 : 0]) * scale
});
}
)));
}
});
}
goToPage = (page: number) => {
if (this._mainCont.current) {
// this._mainCont.current.scrollTo()
}
}
render() {
return (
<div ref={this._mainCont}>
<div ref={this._viewer} />
</div>
)
}
}
class SimpleLinkService {
_viewer: Test;
_pdfjsView: any;
constructor(viewer: Test) {
this._viewer = viewer;
}
setPDFJSview(v: any) { this._pdfjsView = v; }
navigateTo() { }
getDestinationHash() { return "#"; }
getAnchorUrl() { return "#"; }
setHash() { }
isPageVisible(page: number) { return true; }
executeNamedAction() { }
cachePageRef() { }
get pagesCount() { return this._viewer._pdfViewer.pagesCount; }
get page() { return this._viewer._page; }
set page(p: number) {
this._pdfjsView._ensurePdfPageLoaded(this._pdfjsView._pages[p - 1]).then(() => {
this._pdfjsView.renderingQueue.renderView(this._pdfjsView._pages[p - 1]);
if (this._viewer.goToPage) {
this._viewer.goToPage(p);
}
});
}
get rotation() { return 0; }
set rotation(value: any) { }
}
DocServer.init(window.location.protocol, window.location.hostname, 4321, "test");
ReactDOM.render(
<Test />,
document.getElementById('root')
);
|
