embedded.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Office Viewer</title>
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" href="../script/semantic/semantic.min.css">
  7. <!-- <link rel="stylesheet" href="./include/jquery_ui/themes/start/jquery-ui.min.css"> -->
  8. <script src="./include/jquery/jquery-1.12.4.min.js"></script>
  9. <!-- <script src="./include/jquery_ui/jquery-ui.min.js"></script> -->
  10. <script src="../script/ao_module.js"></script>
  11. <!--Docs-->
  12. <script src="./include/docx/jszip-utils.js"></script>
  13. <script src="./include/docx/mammoth.browser.min.js"></script>
  14. <!--PPTX-->
  15. <link rel="stylesheet" href="./include/PPTXjs/css/pptxjs.css">
  16. <link rel="stylesheet" href="./include/PPTXjs/css/nv.d3.min.css">
  17. <script type="text/javascript" src="./include/PPTXjs/js/filereader.js"></script>
  18. <script type="text/javascript" src="./include/PPTXjs/js/d3.min.js"></script>
  19. <script type="text/javascript" src="./include/PPTXjs/js/nv.d3.min.js"></script>
  20. <script type="text/javascript" src="./include/PPTXjs/js/pptxjs.js"></script>
  21. <script type="text/javascript" src="./include/PPTXjs/js/divs2slides.js"></script>
  22. <!--All Spreadsheet -->
  23. <link rel="stylesheet" href="./include/SheetJS/handsontable.full.min.css">
  24. <script type="text/javascript" src="./include/SheetJS/handsontable.full.min.js"></script>
  25. <script type="text/javascript" src="./include/SheetJS/xlsx.full.min.js"></script>
  26. <!--officeToHtml-->
  27. <script src="./include/officeToHtml/officeToHtml.js"></script>
  28. <link rel="stylesheet" href="./include/officeToHtml/officeToHtml.css">
  29. <style>
  30. body{
  31. background-color: rgb(245, 245, 245);
  32. margin: 0;
  33. }
  34. #resolte-contaniner{
  35. background-color: white;
  36. width: 100%;
  37. }
  38. /*
  39. CSS Overwrite for docx
  40. */
  41. #resolte-contaniner.docx{
  42. margin: 2em;
  43. margin-top: 0.8em;
  44. padding: 4em;
  45. overflow-y: auto;
  46. width: calc(100% - 4em);
  47. }
  48. #resolte-contaniner.docx img{
  49. max-width: calc(100% - 1em);
  50. }
  51. /*
  52. CSS overwrite for pptx
  53. */
  54. #resolte-contaniner.pptx .slides-toolbar{
  55. width: 100% !important;
  56. }
  57. #resolte-contaniner.pptx .slide{
  58. margin-left: auto;
  59. margin-right: auto;
  60. max-width: calc(100% - 1em);
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <div id="fileOpenDetails" class="ui container" style="margin-top: 0.4em;">
  66. <p>File Rendered: <a href="" id="filename" target="_blank"></a></p>
  67. </div>
  68. <div id="resolte-contaniner">
  69. </div>
  70. <script>
  71. //Get the input file from the hash
  72. let inputFiles = ao_module_loadInputFiles();
  73. let loadingURL = "";
  74. if (inputFiles != null){
  75. var loadingfile = inputFiles[0];
  76. //Render file information
  77. $("#filename").text(loadingfile.filepath);
  78. $("#filename").attr("href", "/media?download=true&file=" + loadingfile.filepath);
  79. ao_module_setWindowTitle("OfficeViewer - " + loadingfile.filename);
  80. //Get extension and update css rendering rules
  81. var ext = loadingfile.filepath.split(".").pop();
  82. if (ext == "docx" || ext == "doc"){
  83. $("#resolte-contaniner").addClass("docx");
  84. }else if (ext == "pptx" || ext == "ppt"){
  85. $("#resolte-contaniner").addClass("pptx");
  86. }else if (ext == "xlsx" || ext == "xls" || ext == "csv"){
  87. $("#resolte-contaniner").addClass("xlsx");
  88. }
  89. loadFile("/media?file=" + loadingfile.filepath);
  90. }else{
  91. //No set files. Redirect to index
  92. window.location.href = "./index.html"
  93. }
  94. function loadFile(file_path){
  95. $("#resolte-contaniner").officeToHtml({
  96. url: file_path,
  97. pdfSetting: {
  98. setLang: "",
  99. setLangFilesPath: ""
  100. }
  101. });
  102. }
  103. </script>
  104. </body>
  105. </html>