java+vue实现前后端导出html的word文档

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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;   籍贯&nbsp;:&nbsp;<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="[{&quot;label&quot;:&quot;男&quot;,&quot;value&quot;:1},{&quot;label&quot;:&quot;女&quot;,&quot;value&quot;:2},{&quot;label&quot;:&quot;未知&quot;,&quot;value&quot;: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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;   &nbsp; &nbsp; &nbsp;年龄 :&nbsp;<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;