快捷導(dǎo)航

vue實(shí)現(xiàn)html轉(zhuǎn)word與word全過程

更新時(shí)間：2026年01月22日 15:00:05 作者：四木Zhang

本文介紹了如何在Vue中實(shí)現(xiàn)HTML轉(zhuǎn)Word功能,通過拖拽組件生成類似Word的界面,并實(shí)時(shí)預(yù)覽,主要使用了htmlDocx和htmlToDocx插件將HTML轉(zhuǎn)換為.docx格式,同時(shí),還討論了檢查.docx文件是否損壞的方法

vue中實(shí)現(xiàn)html轉(zhuǎn)word

業(yè)務(wù)描述

用戶通過拖拽所需的組件，在頁面生成類似的word界面，并進(jìn)行實(shí)時(shí)預(yù)覽

將該界面的樣式生成.docx文件上傳至后臺(tái)（不觸發(fā)用戶的下載上傳行為）

本次只記錄由html生成.docx的文檔部分，拖拽生成界面部分后續(xù)有時(shí)間會(huì)補(bǔ)充

界面展示

界面總體樣式

這是在界面展示的word樣式

這是生成的.docx文件的模版樣式

實(shí)現(xiàn)方式

將html轉(zhuǎn)成word格式

這一步由插件幫助我們實(shí)現(xiàn)，插件有htmlDocx,htmlToDocx,或許還有其他，這里就記錄這兩個(gè)

1.下載插件

npm install html-docx-js -S  
npm install html-to-docx

2.在vue界面中引入使用

import htmlToDocx from 'html-to-docx'
import htmlDocx from 'html-docx-js/dist/html-docx';

3.獲取dom節(jié)點(diǎn)，利用插件轉(zhuǎn)換成word格式

使用htmlDocx轉(zhuǎn)出word格式

/**

? * 使用htmlDocx插件轉(zhuǎn)換html為word結(jié)構(gòu)
? * 生成的word可以正常使用查看，但是后端讀取時(shí)讀取不到word中的內(nèi)容
? * bug可能是插件轉(zhuǎn)換的結(jié)構(gòu)不正確導(dǎo)致

*/

const dom = document.getElementById('wordContent');
const content = dom.innerHTML;
const convertedBlob = htmlDocx.asBlob(`
     <!DOCTYPE html>
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      </head>

       <body>
          ${content}
       </body>
       </html>
 `);
//Html類型數(shù)據(jù)直接 轉(zhuǎn)換為 文件類型數(shù)據(jù)---直接生成的blob對(duì)象在word文件中打開不是標(biāo)準(zhǔn)的.docx格式
//const blob = new Blob([convertedContent], { type: "application/msword" });//doc文件
//const blob = new Blob([convertedBlob], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });//docx文件

 // 將bolb對(duì)象轉(zhuǎn)為file，轉(zhuǎn)成流后就可以直接上傳到后臺(tái)
 let file = new File([convertedBlob], this.templateName + '.docx', {
 type: 'application/json',
    lastModified: Date.now()
 });
 const formData = new FormData();
 formData.append("file", file);
//調(diào)用上傳接口保存文件
.....

使用htmlToDocx轉(zhuǎn)出word格式

const content = document.getElementById('wordContent').outerHTML;
htmlToDocx(content).then((data) => {
     // FileSaver.saveAs(data, 'output.docx');//下載文件
    //data就是轉(zhuǎn)出的文件
    file = new File([data], this.templateName + '.docx', {
        type: 'application/json',
        lastModified: Date.now()
    });
 })

淺析一下.docx

檢查一個(gè) .docx 文件是否有問題，可以嘗試以下幾個(gè)方法：

直接嘗試打開文件：

使用Microsoft Word嘗試打開文件。如果文件能正常打開并且內(nèi)容顯示無誤，通常說明文件是正常的。
如果Word報(bào)告文件損壞或無法打開，那文件可能存在問題。

文件頭檢查：

使用文本編輯器（如Notepad++）打開 .docx 文件（注意不要直接用記事本打開，因?yàn)檫@會(huì)破壞文件）。
一個(gè)正常的 .docx 文件其實(shí)是一個(gè)ZIP壓縮包，因此你應(yīng)該能看到以PK開頭的一系列字符。
如果看不到這些字符，文件可能不是有效的 .docx 文件或已損壞。

解壓檢查：

將 .docx 文件重命名，將擴(kuò)展名改為 .zip，然后嘗試解壓。
如果能成功解壓，查看解壓后的文件結(jié)構(gòu)是否包含word/document.xml等核心文件。
如果不能解壓或解壓后缺少關(guān)鍵組件，文件可能損壞。

使用專業(yè)工具：

利用專門的文件修復(fù)工具，市面上有一些工具聲稱能修復(fù)損壞的 .docx 文件，盡管效果可能因具體情況而異。
…等等，還有好多就不一一列舉了

主要檢查方式就是將文件重命名為.zip文件，檢查其中的word/document.xml文件

上面使用html-docx-js轉(zhuǎn)換成.docx文檔，后端卻讀取不到內(nèi)容就是因?yàn)閷⑽募孛麨?code>.zip文件后，其中word文件夾下的document.xml的內(nèi)容實(shí)際為空

正常的word文件，打開word文件夾與document.xml看到的內(nèi)容如下

剛剛說的使用html-docx-js轉(zhuǎn)換成.docx文檔的結(jié)構(gòu)如下所示

兩個(gè)word其中的展示內(nèi)容是一樣的，后綴名是.docx時(shí)，兩個(gè)文件都是可以正常看到內(nèi)容的；但是一個(gè)可以被后端讀取到，一個(gè)后端讀取為空，在這里可以看到，其原因就是我們使用html-docx-js轉(zhuǎn)換的word文件中的document.xml文件沒有內(nèi)容