pptx.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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" />
  6. <title>预览pptx</title>
  7. <script src="./utils/flexible.js"></script>
  8. <script src="./utils/ui.js"></script>
  9. <script src="./utils/getQueryVariable.js"></script>
  10. <script src="./pptx/pptx-preview.umd.js"></script>
  11. <link rel="stylesheet" href="./style/ui.css" />
  12. <style type="text/css">
  13. #pptx-preview {
  14. width: 100%;
  15. height: calc(100% - 10px);
  16. font-size: 18px;
  17. }
  18. .pptx-preview-wrapper {
  19. background: #fff !important;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div id="pptx-preview"></div>
  25. <script>
  26. (async function() {
  27. const fileUrl = decodeURIComponent(getQueryVariable('file') || '');
  28. const loading = createLoading();
  29. loading.show();
  30. let pptxPrviewer = pptxPreview.init(document.getElementById('pptx-preview'), {
  31. width: window.innerWidth || 375,
  32. height: window.innerHeight || 667
  33. });
  34. fetch(fileUrl)
  35. .then(response => {
  36. return response.arrayBuffer();
  37. })
  38. .then(res => {
  39. //调用预览器的preview方法
  40. pptxPrviewer.preview(res);
  41. })
  42. .finally(() => {
  43. // 获取页面加载完成后再关闭
  44. loading.hide();
  45. });
  46. })();
  47. </script>
  48. </body>
  49. </html>