上一篇記錄了PDF文件預覽功能。這一篇記錄下docx文件預覽。
核心文件
doc.html
<script src="./build/polyfill.min.js"></script>
<script src="./build/jszip.min.js"></script>
<script src="./build/docx-preview.js"></script>
上一篇記錄了PDF文件預覽功能。這一篇記錄下docx文件預覽。 核心文件為`doc.html`，在這個文件中，引入了幾個關鍵的JavaScript文件來實現docx文件的預覽功能。首先是`polyfill.min.js`，它的作用是為那些不支持某些現代JavaScript特性的瀏覽器提供墊片，確保在各種瀏覽器環境下都能正常運行相關代碼，讓我們的docx預覽功能具備更廣泛的兼容性。接著引入的`jszip.min.js`則是用于處理壓縮文件的庫，因為docx文件本質上是一種基于ZIP格式的壓縮文件，通過這個庫，我們能夠對docx文件內部的結構進行解壓縮和解析操作，為后續的內容提取和展示做準備。而`docx-preview.js`無疑是最為核心的部分，它封裝了一系列復雜的邏輯，專門用于將解壓縮后的docx文件內容轉化為可在網頁上直觀展示的格式。 在實際應用場景中，比如企業內部的文檔管理系統，員工需要在網頁端快速預覽各種docx格式的報告、合同等文件。通過這個基于`doc.html`構建的預覽功能，用戶只需在頁面上點擊相應的docx文件鏈接，后臺便會將文件路徑傳遞給前端。前端利用上述引入的JavaScript庫，迅速對文件進行處理。`jszip.min.js`首先對docx文件進行解壓縮，將其中包含的文本、圖片、格式等信息釋放出來。然后，`docx-preview.js`發揮作用，它根據文件內部的XML結構，將文本內容按照正確的格式排版，同時處理圖片的加載和定位，最終在瀏覽器頁面上呈現出與原始docx文件幾乎一致的視覺效果。這不僅方便了用戶快速查看文件內容，無需再單獨下載和打開本地的辦公軟件，還提高了工作效率，讓文檔管理和協作變得更加流暢和便捷。
?
<!DOCTYPE html><html dir="ltr" mozdisallowselectionprint><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>DOCX viewer</title><!-- This snippet is used in production (included from viewer.html) --><link rel="resource" type="application/l10n" href="locale/locale.properties"><script src="./build/polyfill.min.js"></script><script src="./build/jszip.min.js"></script><script src="./build/docx-preview.js"></script><style>.doc-wrapper{padding:0px !important;overflow: auto;width: 100%;}/* 移動端文檔樣式 */.docx-mobile {max-width: 100vw; /* 設置最大寬度為視口寬度 */padding: 12px 0 !important; /* 添加內邊距 */font-size: 14px; /* 縮小字體適應小屏幕 */line-height: 1.5em; /* 提高行間距以便閱讀 */box-sizing: border-box; /* 確保寬度和邊距適配 */overflow-wrap: break-word; /* 自動換行以避免溢出 */}.docx-mobile img {max-width: 100% !important; /* 圖片寬度自動適應屏幕 */height: auto; /* 高度自動調整，保持比例 */display: block;margin: 10px auto; /* 給圖片上下留空 */}.docx-mobile p, .docx-mobile div {padding:0px !important;max-width: 98% !important; /* 圖片寬度自動適應屏幕 */margin: 0 auto 10px; /* 段落底部留空，避免內容擁擠 */}.docx-mobile h1, .docx-mobile h2, .docx-mobile h3 {font-size: 1.2em; /* 縮小標題字體 */font-weight: bold;margin: 0 0 8px;}/* 為底部注釋和腳注提供較小的字體 */.docx-mobile .footnote, .docx-mobile .endnote {font-size: 12px;color: gray;}</style></head><body><div class="doc-wrapper"><div id="document-container" ref="filebox"></div></div><script>// 獲取 URL 參數中的 'file' 參數值const urlParams = new URLSearchParams(window.location.search);const filePath = urlParams.get('file');if (filePath) {// 如果文件路徑存在，嘗試加載文件var xhr = new XMLHttpRequest();// 設置請求成功后的回調xhr.onload = function() {if (xhr.status === 200) {// 獲取文件的二進制數據var arrayBuffer = xhr.response;console.log('arrayBuffer', arrayBuffer);const container = document.querySelector("#document-container");const docxOptions = Object.assign(docx.defaultOptions, {debug: false,experimental: true,inWrapper:false});const options = {ignoreHeight: true, // 忽略高度，自動適應容器大小ignoreWidth: true, // 忽略寬度，防止內容超出屏幕ignoreFonts: true, // 忽略字體，使用默認網頁字體以優化顯示效果breakPages: false, // 不分頁，在移動端上不強制分頁debug: false, // 關閉調試模式experimental: false, // 不使用實驗性功能// className: "docx-mobile", // 設置為特定類名以便移動端樣式定制className: "docx-pc", // 設置為特定類名以便移動端樣式定制inWrapper: false, // 包裹在一個容器中，便于設置樣式trimXmlDeclaration: true, // 去掉 XML 聲明ignoreLastRenderedPageBreak: true, // 忽略最后一個分頁符renderHeaders: false, // 不渲染頁眉，節省空間renderFooters: false, // 不渲染頁腳，節省空間renderFootnotes: true, // 渲染腳注，根據內容決定是否保留renderEndnotes: true, // 渲染尾注，根據內容決定是否保留useBase64URL: true, // 使用 Base64 URL 以便圖片在移動端加載renderChanges: false, // 不渲染修訂內容，減少頁面元素renderComments: false // 不渲染評論，減少頁面元素};console.log('docxOptions is', JSON.stringify(docxOptions))// const docxPreviewInstance = new DocxPreview(arrayBuffer);// docxPreviewInstance.render(document.getElementById('docx-preview-box'));setTimeout( async() => {let res = await docx.renderAsync(arrayBuffer, container, null, options)}, 200)} else {alert('無法加載文件，狀態碼: ' + xhr.status);}};// 設置請求失敗時的回調xhr.onerror = function() {alert('無法加載文件');};// 發起 GET 請求xhr.open('GET', filePath);xhr.responseType = 'blob'; // 指定返回的響應類型為 ArrayBufferxhr.send();} else {alert('沒有提供文件路徑');}</script></body>
</html>特別提醒下只能夠預覽docx文件。
下面是資源地址，歡迎下載。https://download.csdn.net/download/weixin_37742709/90580946?spm=1001.2014.3001.5503
