本文档介绍了如何使用java和vue.js在前后端实现html内容导出为word文档，无需额外依赖。项目采用vue+Element UI前端框架，后端基于springCloud+springboot。重点在于后端从数据库获取html内容，以二进制形式通过设置请求头和请求体发送到前端，前端通过点击事件触发下载。虽然样例中存在样式问题，但整体流程无误。
java+vue实现前后端导出html的word文档
该内容主要是完成项目中实战导出word文档，而且不需要其他的依赖，原生的写法即可！
本项目架构：
PS：不是这个架构的话看下逻辑就好，赶紧找别的博客看有没有直接能用的！！！
前端：vue+饿了么组件，地址：https://element.eleme.cn/#/zh-CN/component/installation
后端：spirngCloud+springboot
导出的html数据: 【内容过多一行展示，这个不是重点】
<p style="white-space: normal; text-align: center"> <span style="font-size: 40px"><strong>门诊病历</strong></span> </p> <p style="white-space: normal"> <span style="font-size: 40px"><strong><span style="font-size: 12px"><br></span></strong></span> </p> <hr class="pagebreak" noshade="noshade" size="5" style="width: 608px; white-space: normal; user-select: none"> <p style="white-space: normal"> 姓名：<span data-v-69968766="" sde-type="text" id="abc" sde-model="%7B%22mode%22:%22EDITOR%22,%22notdel%22:0,%22strictverify%22:0,%22required%22:0,%22desc%22:%22%E6%82%A3%E8%80%85%E5%A7%93%E5%90%8D%22%7D" sde-right=" " contenteditable="false" class="sde-ctrl" sde-isloadasyncdata="false"><span data-v-69968766="" sde-left="[" sde-right="]" contenteditable="true" class="sde-value" title="患者姓名" _backups=" 患者姓名 "> 患者姓名 </span></span> 籍贯 : <span data-v-69968766="" sde-type="text" id="abc" sde-model="%7B%22mode%22%3A%22EDITOR%22%2C%22notdel%22%3A0%2C%22strictverify%22%3A0%2C%22required%22%3A0%2C%22desc%22%3A%22%E7%9C%81%22%2C%22verify%22%3A%22%22%7D" sde-right=" " contenteditable="false" class="sde-ctrl" sde-isloadasyncdata="false"><span data-v-69968766="" sde-left="[" sde-right="]" contenteditable="true" class="sde-value" title="省">省</span></span>省 <span data-v-69968766="" sde-type="text" id="abc" sde-model="%7B%22mode%22%3A%22EDITOR%22%2C%22notdel%22%3A0%2C%22strictverify%22%3A0%2C%22required%22%3A0%2C%22desc%22%3A%22%E5%B8%82%22%2C%22verify%22%3A%22%22%7D" sde-right=" " contenteditable="false" class="sde-ctrl" sde-isloadasyncdata="false"><span data-v-69968766="" sde-left="[" sde-right="]" contenteditable="true" class="sde-value" title="市">市</span></span>市 </p> <p style="white-space: normal"> 性别：<span data-v-69968766="" sde-type="select" id="abc" sde-model="%7B%22mode%22:%22EDITOR%22,%22notdel%22:0,%22strictverify%22:0,%22required%22:0,%22multi%22:0,%22desc%22:%22%E6%80%A7%E5%88%AB%22,%22bindingdata%22:%5B%7B%22label%22:%22%E7%94%B7%22,%22value%22:1%7D,%7B%22label%22:%22%E5%A5%B3%22,%22value%22:2%7D,%7B%22label%22:%22%E6%9C%AA%E7%9F%A5%22,%22value%22:3%7D%5D%7D" bindingdata="[{"label":"男","value":1},{"label":"女","value":2},{"label":"未知","value":3}]" sde-right=" " contenteditable="false" class="sde-ctrl" sde-value="[]" sde-isloadasyncdata="true" sde-updatetime="2021-03-15T10:43:35.648Z"><span data-v-69968766="" sde-left="[" sde-right="]" contenteditable="true" class="sde-value sde-select" title="性别">性别</span></span> 年龄 : <span data-v-69968766="" sde-type="text" id="abc" sde-model="%7B%22mode%22:%22EDITOR%22,%22notdel%22:0,%22strictverify%22:0,%22verify%22:%22%5E%5B0-9%5D*$%22,%22required%22:0,%22desc%22:%22%E5%B9%B4%E9%BE%84%22%7D" sde-right=" " contenteditable="false" class="sde-ctrl" sde-isloadasyncdata="false"><span data-v-69968766="" sde-left="[" sde-right="]" contenteditable="true" class="sde-value" title="年龄"> 年龄 </span></span> </p> <p style=" margin: 5px 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; "> 婚姻：<span data-v-69968766="" sde-type="select" id="abc" sde-model="%7B%22mode%22%3A%22EDITOR%22%2C%22notdel%22%3
最低0.47元/天 解锁文章
扫一扫
2161
到【灌水乐园】发言
