/
PSPDFKitViewer.tsx
96 lines (81 loc) · 2.8 KB
/
PSPDFKitViewer.tsx
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
import * as React from "react";
import "@pnp/sp/webs";
import "@pnp/sp/files";
import "@pnp/sp/folders";
import { useSnackbar } from "react-simple-snackbar";
import styles from "./PSPDFKitViewer.module.scss";
import { getSP } from "../../../pnpjsConfig";
export default function PSPDFKitViewer(props: IPSPDFKitViewerProps) {
const containerRef = React.useRef(null);
const [documentURL, setDocumentURL] = React.useState(props.documentURL);
const [openSnackbar] = useSnackbar();
React.useEffect(() => {
if (!documentURL) {
return;
}
const container = containerRef.current;
let instance, PSPDFKit, restoreBlobDownloadInterception;
(async () => {
console.log("Will load PSPDFKit instance");
PSPDFKit = await import("pspdfkit");
const saveItem = {
type: "custom",
title: "Save",
async onPress() {
openSnackbar("Updating content...");
const fileContent = await instance.exportPDF();
const sp = getSP();
const file = sp.web.getFileByUrl(documentURL);
await file.setContent(fileContent);
openSnackbar("Content updated.");
},
};
instance = await PSPDFKit.load({
// Container where PSPDFKit should be mounted.
container,
// The document to open.
document: documentURL,
toolbarItems: [
...PSPDFKit.defaultToolbarItems,
saveItem,
],
});
restoreBlobDownloadInterception = disableBlobDownloadInterception();
})();
return () => PSPDFKit && PSPDFKit.unload(container) && restoreBlobDownloadInterception();
}, [documentURL]);
React.useEffect(() => {
setDocumentURL(props.documentURL);
}, [props.documentURL]);
return (
<div className="App">
{documentURL ? (
<div ref={containerRef} style={{ width: "100%", height: "100vh" }} />
) : (
<div className={styles.placeholderWrapper}>
<p>
Select a PDF document from your libraries, and people can view and
edit them with PSPDFKit without leaving your page.
</p>
</div>
)}
</div>
);
}
export interface IPSPDFKitViewerProps {
documentURL: string;
}
function disableBlobDownloadInterception() {
function disableBlobDownloadInterceptionInLink() {
(event: MouseEvent) => {
if (
(event.target as Element).nodeName === "A" &&
(event.target as HTMLElement).hasAttribute("download")
) {
(event.target as HTMLAnchorElement).dataset.interception = "off";
}
}
}
document.addEventListener("click", disableBlobDownloadInterceptionInLink);
return () => document.removeEventListener("click", disableBlobDownloadInterceptionInLink);
}