vue實現(xiàn)html轉word與word全過程

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

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

vue中實現(xiàn)html轉word

業(yè)務描述

用戶通過拖拽所需的組件，在頁面生成類似的word界面，并進行實時預覽

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

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

界面展示

界面總體樣式

這是在界面展示的word樣式

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

實現(xiàn)方式

將html轉成word格式

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

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é)點，利用插件轉換成word格式

使用htmlDocx轉出word格式

/**

? * 使用htmlDocx插件轉換html為word結構
? * 生成的word可以正常使用查看，但是后端讀取時讀取不到word中的內容
? * bug可能是插件轉換的結構不正確導致

*/

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ù)直接 轉換為 文件類型數(shù)據(jù)---直接生成的blob對象在word文件中打開不是標準的.docx格式
//const blob = new Blob([convertedContent], { type: "application/msword" });//doc文件
//const blob = new Blob([convertedBlob], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });//docx文件

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

使用htmlToDocx轉出word格式

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