| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- <!DOCTYPE html>
- <html dir="ltr" mozdisallowselectionprint>
- <head>
- <meta charset="utf-8">
- <title>预览word</title>
-
- <script src="./utils/flexible.js"></script>
- <script src="./word/jszip.min.js" ></script>
- <script src="./word/docx-preview.min.js" ></script>
- <script src="./utils/getQueryVariable.js"></script>
- </head>
-
- <style type="text/css">
- *{padding: 0;margin: 0;}
- body {
- height: 100vh;
- /* width: 100vw; */
- }
- #container {
- width: 100%;
- height: 100%;
- }
- .office-docx{
- height:100%;
- overflow-y:auto;
- }
- .office-docx .docx-wrapper>section.docx{
- margin-bottom:5px;
- }
- @media screen and (max-width: 800px){
- .office-docx .docx-wrapper{
- padding:10px;
- }
- .office-docx .docx-wrapper>section.docx{
- padding:10px !important;
- width:100% !important
- }
- }
- </style>
-
- <script>
- function fetchBlobFromUrl(blobUrl) {
- return new Promise((resolve, reject) => {
- const xhr = new XMLHttpRequest();
- xhr.open('GET', blobUrl, true);
- xhr.responseType = 'blob';
- xhr.onload = function () {
- if (xhr.status === 200) {
- resolve(xhr.response);
- } else {
- reject(new Error(`Failed to fetch blob: ${xhr.statusText}`));
- }
- };
- xhr.onerror = function (err) {
- reject(new Error(err));
- };
- xhr.send();
- });
- }
-
- (async function () {
- const fileUrl = decodeURIComponent(getQueryVariable('file') || '')
- const blob = await fetchBlobFromUrl(fileUrl);
- // console.log(11, blob)
- // const blob = await response.blob()
-
- docx.renderAsync(blob, document.getElementById("body"), document.getElementById("container"),{
- className: "office-docx", // string:默认和文档样式类的类名/前缀
- inWrapper: true, // boolean:启用围绕文档内容的包装器渲染
- ignoreWidth: false, // boolean:禁用页面的渲染宽度
- ignoreHeight: false, // boolean:禁止渲染页面高度
- ignoreFonts: false, // boolean:禁用字体渲染
- breakPages: true, // boolean:在分页符上启用分页
- ignoreLastRenderedPageBreak: true, // boolean:在 lastRenderedPageBreak 元素上禁用分页
- experimental: false, // boolean:启用实验功能(制表符停止计算)
- trimXmlDeclaration: true, // boolean:如果为true,解析前会从 xml 文档中移除 xml 声明
- useBase64URL: false, // boolean:如果为true,图片、字体等会转为base 64 URL,否则使用URL.createObjectURL
- useMathMLPolyfill: false, // boolean:包括用于 chrome、edge 等的 MathML polyfill。
- showChanges: false, // boolean:启用文档更改的实验性渲染(插入/删除)
- debug: false, // boolean:启用额外的日志记录
- }).then(x => console.log("docx: finished"));
- }())
- </script>
-
- <body id="body">
- <div id="container"></div>
- </body>
-
-
-
- </html>
|