preview.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6. <title>健康分析报告</title>
  7. <style>
  8. html, body {
  9. margin: 0;
  10. padding: 0;
  11. width: 100vw;
  12. height: 100vh;
  13. }
  14. </style>
  15. <script>
  16. const base = document.createElement('base');
  17. base.setAttribute('href', location.href.split('preview.html')[0]);
  18. document.head.appendChild(base);
  19. </script>
  20. <link rel="stylesheet" href="./style/loader.css">
  21. <link rel="stylesheet" href="./style/viewer.css">
  22. <link rel="stylesheet" href="./style/download.css">
  23. </head>
  24. <body>
  25. <div class="loader-container">
  26. <div></div>
  27. <div></div>
  28. <div></div>
  29. <div></div>
  30. <div></div>
  31. <div></div>
  32. <div></div>
  33. </div>
  34. <div class="pdf-container"></div>
  35. <div class="download-container">
  36. <svg viewBox="0 0 1026 1024" width="200.390625" height="200">
  37. <path
  38. d="M787.2 711.04a32 32 0 0 1-32-32 32 32 0 0 1 32-32 156.8 156.8 0 0 0 136.32-80.64A200.96 200.96 0 0 0 960 448a198.4 198.4 0 0 0-198.4-198.4 35.2 35.2 0 0 1-30.72-15.36 256 256 0 0 0-460.16 49.92 32.64 32.64 0 0 1-31.36 21.76h-7.68a170.88 170.88 0 0 0 0 341.76h28.8a32 32 0 0 1 32 32 32 32 0 0 1-32 32h-25.6a234.88 234.88 0 0 1-13.44-469.12 320 320 0 0 1 556.8-55.04A263.04 263.04 0 0 1 1024 448a256 256 0 0 1-49.28 152.32 218.88 218.88 0 0 1-187.52 110.72z"></path>
  39. <path
  40. d="M512 948.48a32.64 32.64 0 0 1-32-32V576a32 32 0 0 1 32-32 32 32 0 0 1 32 32v340.48a32 32 0 0 1-32 32z"></path>
  41. <path
  42. d="M512 960a32 32 0 0 1-22.4-9.6l-140.8-141.44a32 32 0 1 1 44.8-46.08l142.08 139.52A32 32 0 0 1 512 960z"></path>
  43. <path
  44. d="M512 960a32.64 32.64 0 0 1-23.04-9.6 32.64 32.64 0 0 1 0-45.44l144.64-142.08a31.36 31.36 0 0 1 44.8 0 32 32 0 0 1 0 45.44l-142.72 139.52A31.36 31.36 0 0 1 512 960z"></path>
  45. </svg>
  46. </div>
  47. <script src="./script/jquery-3.6.0.min.js"></script>
  48. <script src="./script/pdf-viewer-1.1.2.min.js"></script>
  49. <script src="./download.js"></script>
  50. <script>
  51. const $download = $('.download-container');
  52. let url = new URLSearchParams(window.location.search).get('url');
  53. url = decodeURIComponent(url);
  54. import('./script/pdf-4.0.379.min.mjs').then(module => {
  55. module.GlobalWorkerOptions.workerSrc = './script/pdf-4.0.379.worker.mjs';
  56. const pdfViewer = new PDFjsViewer($('.pdf-container'), { pageClass: 'pdf-page' });
  57. pdfViewer.loadDocument(url).then(() => { pdfViewer.setZoom('fit'); });
  58. $download.show();
  59. $download.on('click', function() { download(url); });
  60. });
  61. </script>
  62. </body>
  63. </html>