首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue实现html转word与word

vue实现html转word与word全过程

2026-01-22 15:00:05 作者：四木Zhang

本文介绍了如何在Vue中实现HTML转Word功能,通过拖拽组件生成类似Word的界面,并实时预览,主要使用了htmlDocx和htmlToDocx插件将HTML转换为.docx格式,同时,还讨论了检查.docx文件是否损坏的方法

vue中实现html转word

业务描述

用户通过拖拽所需的组件，在页面生成类似的word界面，并进行实时预览

将该界面的样式生成.docx文件上传至后台（不触发用户的下载上传行为）

本次只记录由html生成.docx的文档部分，拖拽生成界面部分后续有时间会补充

界面展示

界面总体样式

这是在界面展示的word样式

这是生成的.docx文件的模版样式

实现方式

将html转成word格式

这一步由插件帮助我们实现，插件有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节点，利用插件转换成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类型数据直接 转换为 文件类型数据---直接生成的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()
    });
 })