word.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html dir="ltr" mozdisallowselectionprint>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>预览word</title>
  6. <script src="./utils/flexible.js"></script>
  7. <script src="./word/jszip.min.js" ></script>
  8. <script src="./word/docx-preview.min.js" ></script>
  9. <script src="./utils/getQueryVariable.js"></script>
  10. </head>
  11. <style type="text/css">
  12. *{padding: 0;margin: 0;}
  13. body {
  14. height: 100vh;
  15. /* width: 100vw; */
  16. }
  17. #container {
  18. width: 100%;
  19. height: 100%;
  20. }
  21. .office-docx{
  22. height:100%;
  23. overflow-y:auto;
  24. }
  25. .office-docx .docx-wrapper>section.docx{
  26. margin-bottom:5px;
  27. }
  28. @media screen and (max-width: 800px){
  29. .office-docx .docx-wrapper{
  30. padding:10px;
  31. }
  32. .office-docx .docx-wrapper>section.docx{
  33. padding:10px !important;
  34. width:100% !important
  35. }
  36. }
  37. </style>
  38. <script>
  39. function fetchBlobFromUrl(blobUrl) {
  40. return new Promise((resolve, reject) => {
  41. const xhr = new XMLHttpRequest();
  42. xhr.open('GET', blobUrl, true);
  43. xhr.responseType = 'blob';
  44. xhr.onload = function () {
  45. if (xhr.status === 200) {
  46. resolve(xhr.response);
  47. } else {
  48. reject(new Error(`Failed to fetch blob: ${xhr.statusText}`));
  49. }
  50. };
  51. xhr.onerror = function (err) {
  52. reject(new Error(err));
  53. };
  54. xhr.send();
  55. });
  56. }
  57. (async function () {
  58. const fileUrl = decodeURIComponent(getQueryVariable('file') || '')
  59. const blob = await fetchBlobFromUrl(fileUrl);
  60. // console.log(11, blob)
  61. // const blob = await response.blob()
  62. docx.renderAsync(blob, document.getElementById("body"), document.getElementById("container"),{
  63. className: "office-docx", // string:默认和文档样式类的类名/前缀
  64. inWrapper: true, // boolean:启用围绕文档内容的包装器渲染
  65. ignoreWidth: false, // boolean:禁用页面的渲染宽度
  66. ignoreHeight: false, // boolean:禁止渲染页面高度
  67. ignoreFonts: false, // boolean:禁用字体渲染
  68. breakPages: true, // boolean:在分页符上启用分页
  69. ignoreLastRenderedPageBreak: true, // boolean:在 lastRenderedPageBreak 元素上禁用分页
  70. experimental: false, // boolean:启用实验功能(制表符停止计算)
  71. trimXmlDeclaration: true, // boolean:如果为true,解析前会从​​ xml 文档中移除 xml 声明
  72. useBase64URL: false, // boolean:如果为true,图片、字体等会转为base 64 URL,否则使用URL.createObjectURL
  73. useMathMLPolyfill: false, // boolean:包括用于 chrome、edge 等的 MathML polyfill。
  74. showChanges: false, // boolean:启用文档更改的实验性渲染(插入/删除)
  75. debug: false, // boolean:启用额外的日志记录
  76. }).then(x => console.log("docx: finished"));
  77. }())
  78. </script>
  79. <body id="body">
  80. <div id="container"></div>
  81. </body>
  82. </html>