K60至尊版狂暴引擎2.0加持：超177萬跑分斬獲性能第一
Redmi的后性能時代戰略發布會今天下午如期舉辦，在本次發布會上，Redmi公布了多項關于和聯發科的深度合作，以及新機K60 Ultra在軟件和硬件方面的特性，例如：“K60 至尊版，雙芯旗艦
最近由于AI應用的高速發展，使得文檔/知識庫成為了AI的首選試煉場。比如用AI提取PDF的大綱和關鍵內容，用AI總結電子書的內容，AI對DOC文檔進行潤色，優化等，這些都離不開對文檔的解析和處理。
那么前端能不能實現對文檔的解析和處理呢？答案是肯定的，接下來我就和大家分享一下:
當然口說無憑，我已經在Nocode/WEP文檔知識引擎中把Doc文檔功能實現了，大家感興趣的可以親自體驗一下。
image.png
好啦，接下來開始我們的技術分享。
圖片
image.png
Word 文檔的本質是一種電子文檔格式，它主要用于創建、編輯和保存文本內容，同時還可以包含圖片、表格、圖表等多種元素。它是一種方便的工具，用于記錄、整理和交流信息。
doc 和 docx 是兩種常見的 Word 文檔格式，它們主要有以下區別：
為了與時俱進，我們優先考慮最新標準格式 docx， 那么如何解析 docx 呢，這就要進一步分析一下 docx文件的本質了。
docx 我們第一感覺是一個文件，其實確實是一個文件（壓縮文件），我用解壓工具提取文件之后，它的文件結構是這樣的：
圖片
進入 word 文件夾，可以看到如下目錄結構：
圖片
打開一個 xml 文件可以看到類似如下的內容：
圖片
看到這熟悉前端的小伙伴應該就比較熟悉了，我們可以使用類似于 document 的方法解析處理不同的XML標簽，從而實現對 docx 文件的解析。
有了以上的分析結果，我們自己實現一個word文檔解析器就非常容易了，但是考慮到docx的xml 文件的復雜性，我們自己實現需要考慮很多種情況，比如：
如果是項目進度比較緊張的情況下，我們自己實現肯定是要被“批斗”的，所以我們可以考慮第三方成熟的解決方案。
這里直接上我總結的幾個開源方案：
那作為前端的小伙伴，我們首選 Mammoth。
圖片
github地址：https://github.com/mwilliamson/mammoth.js
接下來和大家分享一下使用 Mammoth 來實現 docx 文檔解析。
先來看一個簡單的例子：
import mammoth from 'mammoth';mammoth.convertToHtml({path: "你的doc文件的路徑/document.docx"}) .then(function(result){ var html = result.value; // 解析出的html結果 var messages = result.messages; // 錯誤或者額外的提示信息 }) .catch(function(error) { console.error(error); });以上代碼是在node.js 環境下實現的簡單例子，當然我們也可以在瀏覽器中直接使用，我在看完了它的文檔之后，加上自己的研究，寫了一個能自定義圖片上傳路徑，并支持修改文檔樣式的demo，這里分享一下：
<!DOCTYPE html><html lang="en"><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"> <title>Document</title></head><body> <input type="file" onchange="handleFile(this.files[0])" /> <script src="https://unpkg.com/mammoth@latest/dist/mammoth.min.js"></script> <script> function handleFile(file) { const reader = new FileReader(); reader.onload = function (loadEvent) { const arrayBuffer = loadEvent.target.result; mammoth.convertToHtml({ arrayBuffer: arrayBuffer }, { // 設置自定義圖片上傳路徑 imageReader: (image) => { return new Promise((resolve, reject) => { // 在這里實現圖片上傳邏輯，并將上傳后的圖片路徑作為結果返回 resolve('your_uploaded_image_path'); }); }, // 設置文本樣式 styleMap: [ // 標題樣式 { name: 'Heading 1', element: 'h1', attributes: { 'tyle': 'font-size: 24px; color: #333;', }, }, // 正文樣式 { name: 'Normal', element: 'p', attributes: { 'tyle': 'font-size: 16px; color: #666;', }, }, ], }) .then(result => { console.log(result.value); }) .catch(error => { console.error(error); }); }; reader.readAsArrayBuffer(file); } </script></body></html>
圖片
實現將html導出為word文檔，方法其實也很簡單，這里直接分享一下我的方案：
const html = docRef.current;const blob = new Blob([html.innerHTML], { type: 'application/msword' });// 創建一個下載鏈接const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.download = 'wep.doc';// 模擬點擊下載鏈接link.click();// 釋放資源URL.revokeObjectURL(link.href);本質上就是我們將 html內容轉化為blob，并設置類型為application/msword, 最后通過revokeObjectURL api來實現docx文檔下載。
當然還有其他方案，這里也和大家分享一下：
import htmlDocx from 'html-docx-js/dist/html-docx';import FileSaver from 'file-saver';// 定義要導出的 HTML 內容const htmlContent = ` <h1>標題</h1> <p>這是一段文本。</p> <table border="1"> <tr> <th>姓名</th> <th>年齡</th> </tr> <tr> <td>張三</td> <td>25</td> </tr> </table>`;// 將 HTML 轉換為 Word 文檔const docx = htmlDocx.asBlob(htmlContent);// 保存 Word 文檔FileSaver.saveAs(docx, 'example.docx');所有案例都在Nocode/WEP中實現，大家感興趣可以參考一下：http://wep.turntip.cn/
本文鏈接：http://www.tebozhan.com/showinfo-26-94281-0.html探索Word文檔導入導出的前端實現方案
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 寧德時代實行“896 工作制”奮斗 100 天？內部員工回應： 非全員強制
下一篇： 我們一起聊聊如何設計一個秒殺系統？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號