探索Word文檔導入導出的前端實現方案
最近由于AI應用的高速發展，使得文檔/知識庫成為了AI的首選試煉場。比如用AI提取PDF的大綱和關鍵內容，用AI總結電子書的內容，AI對DOC文檔進行潤色，優化等，這些都離不開對文檔的解析和處理。
那么前端能不能實現對文檔的解析和處理呢？答案是肯定的，接下來我就和大家分享一下:
- 前端如何解析Word文件
- 基于HTML，一鍵導出為Word文檔
當然口說無憑，我已經在Nocode/WEP文檔知識引擎中把Doc文檔功能實現了，大家感興趣的可以親自體驗一下。
image.png
好啦，接下來開始我們的技術分享。
往期精彩
- 零代碼+AI的階段性復盤
- 文檔引擎+AI可視化打造下一代文檔編輯器
- 爆肝1000小時, Dooring零代碼搭建平臺3.5正式上線
- 從零打造一款基于Nextjs+antd5.0的中后臺管理系統
Word文檔的本質
圖片
image.png
Word 文檔的本質是一種電子文檔格式，它主要用于創建、編輯和保存文本內容，同時還可以包含圖片、表格、圖表等多種元素。它是一種方便的工具，用于記錄、整理和交流信息。
doc 和 docx 是兩種常見的 Word 文檔格式，它們主要有以下區別：
- 版本：doc 是 Word 2003 及之前版本的默認文件格式，而 docx 是 Word 2007 及之后版本的默認文件格式。
- 兼容性：doc 格式的兼容性較好，可以被大多數舊版本的 Word 軟件打開。而 docx 格式在較新版本的 Word 中得到完全支持，但在一些舊版本的 Word 中可能需要安裝兼容性插件才能正常打開。
- 文件體積：由于 docx 格式采用了更高效的壓縮技術，所以它的文件體積通常比 doc 格式小。
- 安全性：docx 格式采用基于 XML 的格式，相對更安全一些，不容易受到宏病毒的攻擊。
- 功能支持：docx 格式支持更多的新特性和功能，如高級的圖表和圖形處理、更豐富的格式選項、多媒體嵌入等。而 doc 格式則不支持這些新功能。
為了與時俱進，我們優先考慮最新標準格式 docx， 那么如何解析 docx 呢，這就要進一步分析一下 docx文件的本質了。
docx 的本質是什么
docx 我們第一感覺是一個文件，其實確實是一個文件（壓縮文件），我用解壓工具提取文件之后，它的文件結構是這樣的：
圖片
進入 word 文件夾，可以看到如下目錄結構：
圖片
打開一個 xml 文件可以看到類似如下的內容：
圖片
看到這熟悉前端的小伙伴應該就比較熟悉了，我們可以使用類似于 document 的方法解析處理不同的XML標簽，從而實現對 docx 文件的解析。
如何實現Word文檔的解析
有了以上的分析結果，我們自己實現一個word文檔解析器就非常容易了，但是考慮到docx的xml 文件的復雜性，我們自己實現需要考慮很多種情況，比如：
- 標題
- 列表
- 標題
- 列表
- 可定制的 docx 樣式到 HTML 的映射
- 表格：表格格式（如邊框）
- 腳注和尾注
- 圖片
- 粗體、斜體、下劃線、刪除線、上標和下標。
- 鏈接
- 換行
- 文本框：文本框的內容被視為一個單獨的段落，出現在包含文本框的段落之后。
- 注釋
如果是項目進度比較緊張的情況下，我們自己實現肯定是要被“批斗”的，所以我們可以考慮第三方成熟的解決方案。
第三方開源方案
這里直接上我總結的幾個開源方案：
- Python 中的 python-docx
- DocX：一個基于.NET框架的庫，用于操作Word 2007/2010/2013文件，具有簡單易用的API，無需安裝額外軟件，支持非商業用途。
- OpenXml-PowerTools：一個基于Open XML文檔編程接口開發的開源工具，擴展了Open XML SDK的功能，支持將docx、pptx文件拆分為多個文件、將多個docx、pptx文件合并為一個文件、使用XML數據模板生成docx文件、docx文檔高保值轉換為Html頁面等功能
- Mammoth 一個專注于轉換 .docx 文檔的工具庫，支持瀏覽器和服務器使用
那作為前端的小伙伴，我們首選 Mammoth。
圖片
github地址：https://github.com/mwilliamson/mammoth.js
實戰Word文檔解析
接下來和大家分享一下使用 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>Word文檔導出實現
圖片
實現將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/
