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()
});
})
浅析一下.docx
检查一个 .docx 文件是否有问题，可以尝试以下几个方法：
直接尝试打开文件：
- 使用Microsoft Word尝试打开文件。如果文件能正常打开并且内容显示无误，通常说明文件是正常的。
- 如果Word报告文件损坏或无法打开，那文件可能存在问题。
文件头检查：
- 使用文本编辑器（如Notepad++）打开 .docx 文件（注意不要直接用记事本打开，因为这会破坏文件）。
- 一个正常的 .docx 文件其实是一个ZIP压缩包，因此你应该能看到以PK开头的一系列字符。
- 如果看不到这些字符，文件可能不是有效的 .docx 文件或已损坏。
解压检查：
- 将
.docx文件重命名，将扩展名改为.zip，然后尝试解压。 - 如果能成功解压，查看解压后的文件结构是否包含word/document.xml等核心文件。
- 如果不能解压或解压后缺少关键组件，文件可能损坏。
使用专业工具：
- 利用专门的文件修复工具，市面上有一些工具声称能修复损坏的 .docx 文件，尽管效果可能因具体情况而异。
- …等等，还有好多就不一一列举了
主要检查方式就是将文件重命名为.zip文件，检查其中的word/document.xml文件
上面使用html-docx-js转换成.docx文档，后端却读取不到内容就是因为将文件重命名为.zip文件后，其中word文件夹下的document.xml的内容实际为空
正常的word文件，打开word文件夹与document.xml看到的内容如下
刚刚说的使用html-docx-js转换成.docx文档的结构如下所示
两个word其中的展示内容是一样的，后缀名是.docx时，两个文件都是可以正常看到内容的；但是一个可以被后端读取到，一个后端读取为空，在这里可以看到，其原因就是我们使用html-docx-js转换的word文件中的document.xml文件没有内容
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在现代Web应用中，PDF文档的使用非常普遍，因为它可以在各种设备和操作系统上保持一致的外观和格式，本文我们就来探讨一下如何在Vue.js应用中使用vue-pdf库嵌入PDF文档吧2023-08-08
这篇文章主要介绍了vue项目运行npm install报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-08-08
这篇文章主要为大家介绍了Vue编程三部曲之模型树优化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了Vue实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了vue通过style或者class改变样式的实例代码，在文中给大家提到了vue的一些样式(class/style)绑定,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了如何修改el-form-item 的label的字体颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue检测屏幕变化来改变不同的charts样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue项目build后,图片加载不出来的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家详细介绍了Vue3和Vite的那些事，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
在本篇文章里小编给大家整理的是关于卸载vue2.0并升级vue_cli3.0的实例内容，需要的朋友们可以学习参考下。2020-02-02
最新评论