Hugging Face's logo

Spaces:
Marthee
/
NavigateToPage
Sleeping

App Files Community
Marthee commited on
Commit
4d974bc
·
verified ·
1 Parent(s): ab6de08

Update templates/gui.html

Browse files
Files changed (1) hide show
  1. templates/gui.html +38 -3
templates/gui.html CHANGED
@@ -3,14 +3,49 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>View PDF</title>
 
 
 
 
 
 
 
 
7
  </head>
8
  <body>
9
 
10
  <h2>PDF Viewer</h2>
11
 
12
- <!-- Open PDF in a new tab -->
13
- <button onclick="window.open('/download-pdf', '_blank')">View PDF</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
 
15
  </body>
16
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>View PDF with PDF.js</title>
7
+
8
+ <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
9
+ <style>
10
+ canvas {
11
+ width: 100%;
12
+ height: auto;
13
+ }
14
+ </style>
15
  </head>
16
  <body>
17
 
18
  <h2>PDF Viewer</h2>
19
 
20
+ <div id="pdf-container"></div>
21
+
22
+ <script>
23
+ async function renderPdf() {
24
+ const url = '/download-pdf';
25
+ const loadingTask = pdfjsLib.getDocument(url);
26
+
27
+ const pdf = await loadingTask.promise;
28
+ const page = await pdf.getPage(2);
29
+
30
+ const scale = 1.5;
31
+ const viewport = page.getViewport({ scale });
32
+
33
+ const canvas = document.createElement('canvas');
34
+ const context = canvas.getContext('2d');
35
+ canvas.height = viewport.height;
36
+ canvas.width = viewport.width;
37
+
38
+ const renderContext = {
39
+ canvasContext: context,
40
+ viewport: viewport
41
+ };
42
+
43
+ page.render(renderContext);
44
+ document.getElementById('pdf-container').appendChild(canvas);
45
+ }
46
+
47
+ renderPdf();
48
+ </script>
49
 
50
  </body>
51
  </html>