pdfjs-viewer-element/index.html at master · missing-elements/pdfjs-viewer-element · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>pdfjs-viewer-element</title>
    <meta name="description" content="A web component for viewing pdf files in the browser, based on PDF.js">
    <script type="module" src="./src/pdfjs-viewer-element.ts"></script>
    <script type="module" src="./index.js"></script>
  </head>
  <body style="margin: 0">
    <!-- <pdfjs-viewer-element
      src="/fake-file.pdf"
      style="height: 600px">
    </pdfjs-viewer-element>
    <pdfjs-viewer-element
      id="hideOpenFileViewer"
      iframe-title="Custom title"
      src="/sample-pdf-with-images.pdf"
      locale="de"
      page="2"
      style="height: 600px">
    </pdfjs-viewer-element>
    <button onclick="toggleDownloadButton(document.querySelector('#hideOpenFileViewer'))">Toggle download button</button> -->

    <pdfjs-viewer-element
      id="themedViewer"
      page="3"
      locale="uk"
      src="/sample-pdf-10MB.pdf"
      style="height: 600px">
    </pdfjs-viewer-element>

    <hr>
    <button onclick="document.querySelector('#themedViewer').setAttribute('viewer-css-theme', 'DARK')">Change theme</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('viewer-css-theme', 'AUTOMATIC')">Reset theme</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('page', '2')">Change page</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('page', '1')">Reset page</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('locale', 'de')">Change locale</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('locale', 'pl')">Reset locale</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('search', 'iss')">Change search text</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('search', '')">Reset search text</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('phrase', 'true')">Change search phrase</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('phrase', 'false')">Reset search phrase</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('zoom', '200%')">Change zoom</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('zoom', 'auto')">Reset zoom</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('pagemode', 'thumbs')">Change page mode</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('pagemode', 'none')">Reset page mode</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('src', '/sample-pdf-with-images.pdf')">Load images PDF</button>
    <button onclick="document.querySelector('#themedViewer').setAttribute('src', '/sample-pdf-10MB.pdf')">Load 10MB PDF</button>
    <hr>

    <!-- <pdfjs-viewer-element
      id="base-viewer"
      locale="uk"
      style="height: clamp(400px, 80dvh, 600px)">
    </pdfjs-viewer-element> -->
  </body>
</html>