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;     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%3A0%2C%22strictverify%22%3A0%2C%22required%22%3A0%2C%22multi%22%3A0%2C%22desc%22%3A%22%E5%A9%9A%E5%A7%BB%22%2C%22bindingdata%22%3A%5B%7B%22value%22%3A%221%22%2C%22label%22%3A%22%E5%B7%B2%E5%A9%9A%22%2C%22selected%22%3A0%7D%2C%7B%22value%22%3A%222%22%2C%22label%22%3A%22%E6%9C%AA%E5%A9%9A%22%2C%22selected%22%3A0%7D%5D%2C%22remotedata%22%3Anull%7D" bindingdata="[{&quot;value&quot;:&quot;1&quot;,&quot;label&quot;:&quot;已婚&quot;,&quot;selected&quot;:0},{&quot;value&quot;:&quot;2&quot;,&quot;label&quot;:&quot;未婚&quot;,&quot;selected&quot;:0}]" sde-right=" " contenteditable="false" class="sde-ctrl" sde-isloadasyncdata="true" sde-updatetime="2021-03-15T10:43:35.648Z" sde-value="[{&quot;value&quot;:&quot;2&quot;,&quot;label&quot;:&quot;未婚&quot;,&quot;selected&quot;:0}]"><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="date" 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%85%A5%E9%99%A2%E6%97%A5%E6%9C%9F%22%2C%22defvalue%22%3A%222018-05-07%2016%3A08%3A09%22%2C%22format%22%3A%22%7Byyyy%7D-%7BMM%7D-%7Bdd%7D%20%7Bhh%7D%3A%7Bmm%7D%3A%7Bss%7D%22%2C%22min%22%3A%22%22%2C%22max%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="入院日期" _backups="">入院日期</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;   ">   民族:汉&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; &nbsp; &nbsp; &nbsp;病史采集日期:<span data-v-69968766="" sde-type="date" 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%E9%87%87%E9%9B%86%E7%97%85%E4%BA%BA%E6%97%B6%E9%97%B4%22%2C%22defvalue%22%3A%222018-05-07%2016%3A08%3A09%22%2C%22format%22%3A%22%7Byyyy%7D-%7BMM%7D-%7Bdd%7D%22%2C%22min%22%3A%22%22%2C%22max%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="采集病人时间">2018-05-16</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;   ">   职业:职员&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; &nbsp; 病史陈述者:本人&nbsp; &nbsp;   &nbsp;可靠程度:可靠<br> </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;   ">   过敏史:无&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; &nbsp; 记录日期:<span data-v-69968766="" sde-type="date" 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%E8%AE%B0%E5%BD%95%E6%97%B6%E9%97%B4%22%2C%22defvalue%22%3A%222018-05-07%2016%3A08%3A09%22%2C%22format%22%3A%22%7Byyyy%7D-%7BMM%7D-%7Bdd%7D%22%2C%22min%22%3A%22%22%2C%22max%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="记录时间" _backups="">记录时间</span></span> </p> <hr class="pagebreak" noshade="noshade" size="5" style="     display: block;     margin: 0px;     clear: both !important;     cursor: default !important;     width: 608px;     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;     user-select: none;   "> <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;   ">   <br> </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;   ">   主诉:腹痛、恶心、呕吐 </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;   ">   <br> </p> <hr class="pagebreak" noshade="noshade" size="5" style="     display: block;     margin: 0px;     clear: both !important;     cursor: default !important;     width: 608px;     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;     user-select: none;   "> <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;   ">   现病史:现病史<br> </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 style="       color: rgb(213, 5, 1);       font-family: Arial, sans-serif;       font-size: 14px;       background-color: rgb(255, 255, 255);     ">鉴别诊断:&nbsp;     1.胆系结石:患者多有上腹疼,疼痛可向腰背部放射,可出现黄疸,查体肝区叩痛,Murphy氏征阳性。B超或CT可发现胆系结石,肝功以直接胆红素升高为主,该患者应行CT检查明确。</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 style="       color: rgb(213, 5, 1);       font-family: Arial, sans-serif;       font-size: 14px;       background-color: rgb(255, 255, 255);     ">&nbsp;     &nbsp;2.消化性溃疡并穿孔:可有慢性反复腹痛,突发加重,疼痛可向腰背部放射,伴腹膜炎体征,肝浊音界消失,腹透示膈下游离气体,该病人无相关病史,体征及腹透不支持。</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 style="       color: rgb(213, 5, 1);       font-family: Arial, sans-serif;       font-size: 14px;       background-color: rgb(255, 255, 255);     ">&nbsp;     3.急性心肌梗死:表现为胸痛、胸闷,伴有低血压,心律失常,ECG及心肌酶谱有相应改变,该病人表现不符,可行上述检查除外。</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 style="       color: rgb(213, 5, 1);       font-family: Arial, sans-serif;       font-size: 14px;       background-color: rgb(255, 255, 255);     ">&nbsp;     4.主动脉夹层:表现为胸痛或腹痛,程度剧烈,呈撕裂样,常放射到腰背部及下肢,主动脉超声或CT有助诊断</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;   ">   诊疗计划:1、内科护理常规,禁饮食,监测生命体征,记尿量。2、给予抑酸、减少胰酶分泌、抑制胰酶活性治疗3、给予抗生素治疗4、维持水电解质平衡,保持血容量及对症营养支持治疗 </p>

后端

主要完成是从数据库读取要导出的html内容,然后将数据以二进制传递给前端。
重点:设置请求头,请求体之类的东西。

PS:红色圈住的是个人业务代码,无需理会。根据你自己的实际情况看是否需要

控制层(看个人习惯,其实业务层代码不多,你可以将业务层代码写控制层里面(可以省略自定义业务层的方法),但我还是写在业务层吧)

@PostMapping("/exportByTemplate")
//这里测试过了,返回值无论是二进制数组,流对象其实没什么意义,都不用返回值,内容在response写出了,前端会接收
public void exportByTemplate(HttpServletResponse response, HttpServletRequest request) throws Exception{medicalRecordTemplateService.exportByTemplate(response,request);}

接着业务层

@Overridepublic void exportByTemplate(HttpServletResponse response, HttpServletRequest request) throws Exception{String content = "复制上面导出的html数据"//获取servlet的返回流的对象OutputStream out = response.getOutputStream();//这里是重点,设置的请求体以二进制,编码一般是UTF-8,根据自己需求来吧response.setContentType("application/binary;charset=UTF-8");//设置请求头,前缀固定写法,这里用到了工具类,下面有给出(主要怕浏览器文件名乱码)response.setHeader("Content-Disposition", "attachment;fileName="+ EncodeUtils.getStringByResponse("自定义这个下载的文件名称", request));//因为业务问题,这边的html标签和body拼接里面的内容String html = "<html><body>" + content+ "</body></html>";//以流的形式写出out.write(html.getBytes());//记得关闭(我业务直接抛出,没做try catch finally块,关闭放在finally块里面)out.close();
}

工具类

import javax.servlet.http.HttpServletRequest;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;/*** 浏览器编码工具*/
public class EncodeUtils {public static final String USER_AGENT = "User-Agent";public static final String ENCODE_UTF_8 = "UTF-8";public static final String ENCODE_ISO_8859_1 = "ISO8859-1";public static final String FIREFOX = "firefox";public static final String MSIE = "MSIE";public static final String CHROME = "CHROME";/*** 根据浏览器类型转换字符串编码(解决不同浏览器下载文件时,文件名乱码)* @param fileName* @param request* @return*/public static String getStringByResponse(String fileName, HttpServletRequest request){try{if (request.getHeader(USER_AGENT).toLowerCase().indexOf(FIREFOX) > 0) {// firefox浏览器fileName = new String(fileName.getBytes(ENCODE_UTF_8), ENCODE_ISO_8859_1);} else if (request.getHeader(USER_AGENT).toUpperCase().indexOf(MSIE) > 0) {// IE浏览器fileName = URLEncoder.encode(fileName, ENCODE_UTF_8);}else if (request.getHeader(USER_AGENT).toUpperCase().indexOf(CHROME) > 0) {// 谷歌浏览器fileName = new String(fileName.getBytes(ENCODE_UTF_8), ENCODE_ISO_8859_1);}}catch (UnsupportedEncodingException e){e.printStackTrace();}return fileName;}}

后端基本上没什么问题,根据自己的业务逻辑,替换要读取的值即可

前端

控件,就是一个单击事件的动作触发下载

<template>
<el-buttontype="warning"icon="el-icon-download"size="mini"@click="handleExport2">导出</el-button>
</template>

js 文件(这个不用我多说了吧,引用后台接口)

import request from '@/utils/request'
export function exportByTemplate(data) {return request({url: '/system/template/exportByTemplate',method: 'post',data: data})
}

记得在vue里面引入上面的这个js文件并调用这个方法,我IDEA自动生成的
import {exportByTemplate} from “@/api/system/class”;
方法:

handleExport2() {let data = {}exportByTemplate(data ).then(response => {if (!response) returnlet blob = new Blob([response], {type: 'application/msword;charset=utf-8'})this.downloadUtils(blob, 'doc')});},downloadUtils(blob, type){let url = window.URL.createObjectURL(blob);let aLink = document.createElement("a");aLink.style.display = "none";aLink.href = url;let suffix = 'doc'//因为是公共方法一般都会抽取,根据你打印的类型,参数tyep,改后缀名,改msword就可以了,逻辑是复用的//【只演示word打印就没必要】// if (type === 'doc') {//   suffix = 'doc'// }let fileName = "自定义文件名称"aLink.setAttribute("download", fileName + '.' + suffix);document.body.appendChild(aLink);aLink.click();document.body.removeChild(aLink);window.URL.revokeObjectURL(url);},

最终效果演示
点击这个图片:

浏览器提示下载,还有电脑管家提醒,开发测试当然是用谷歌:

打开word 看看(这是数据问题,不是代码导致的,因为这个数据是用了编辑器保存,有些加密的,导致样式走位了,整个流程是没问题的)
例如:原本应该是 姓名:【患者姓名】 这个【】就是编辑加密的,自动获取其内容,下面的数据就正常显示

如果你的需求是html和CSS是分离那种,那网上有很多的博客都有说。这里主要是样式都在一个页面内所以比较简单。他们的是直接指定本地路径下载(毕竟是个main方法,算是个demo),实战当中肯定不可能这样做,所以了解我的核心部分就行,最后还是要感谢各位!

附带一个w3c,Mime类型说明【MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。】,后缀名对应的applicaion
https://www.w3school.com.cn/media/media_mimeref.asp

java+vue实现前后端导出html的word文档相关推荐

  1. 【Python】导出docx格式Word文档中的文本、图片和附件等

    [Python]导出docx格式Word文档中的文本.图片和附件等 零.需求 为批量批改学生在机房提交的实验报告,我需要对所有的实验文档内容进行处理.需要批量提取Word文档中的图片和附件以便进一步检 ...

  2. 使用FreeMarker导出固定格式word文档

    使用FreeMarker导出固定格式word文档 一.下载FreeMarker的jar包 下载地址:http://freemarker.org/freemarkerdownload.html,导入项目 ...

  3. java利用Freemarker模板生成docx格式的word文档(全过程)

    参考汇总: wordexport: JAVA生成并导出Word文档技术论证 java利用Freemarker模板生成docx格式的word文档(全过程) - 旁光 - 博客园 # 参考资料 - 其他项 ...

  4. java导出excel与word文档

    导出excel与word 依赖如下 <!--导出excel文档,easyexcel的依赖:为了防止poi版本冲突--><dependency><groupId>co ...

  5. Java使用模板导出带图片word文档

    之前已经写过一个 Java使用模板导出Word文档 由于系统升级,模板得添加图片,这个时候遇到了一个比较恶心的问题特地发文记录一下. 先把老模板翻出来 **.ftl 然后右键用wps或者office打 ...

  6. java开发导出Excel和Word文档

    前言:刚满18的小编在电脑网页上看到好看但19禁的电影,然后想下载到手机上看,你会怎么做? 1.这是一个后台,里面已经增加了几部电影... 2.这是导出Excel,这是方便以后查询用的,生成Excel ...

  7. java导出数据到word文档中

    1.功能概述: web项目中,在html文件点击下载word文件,后台获取要输出的数据再导出到word文档中 2. 操作步骤: (1).新建word模板,凡是需要填充的数据用${xxxx},编辑好wo ...

  8. Java读写word带样式,java将html导出带样式word文档

    java怎么由html生成word,保留html样式 @RequestMapping("download")public void exportWord( HttpServletRequest req ...

  9. java 导出word 带格式_java 导出数据为word文档(保持模板格式)

    导出数据到具体的word文档里面,word有一定的格式,需要保持不变 这里使用freemarker来实现: ①:设计好word文档格式,需要用数据填充的地方用便于识别的长字符串替换  如  aaaaa ...

最新文章

  1. C#操作Sqlite快速入门及相关工具收集
  2. 绘制机械图c语言编程,求用C语言绘制机械三视图程序?
  3. 【机器学习】与机器学习算法公式相关的数学家,你认识几个?
  4. P3399 丝绸之路(线性二维dp)
  5. 不重装,不还原,不优化,让你的系统比重装还爽
  6. LUOGU P4178 Tree
  7. RRD_rrd4j的使用说明
  8. 如何大量做外链 不仅正规而有效果
  9. Tracing event
  10. 计算机教学能力提升体会,学习《信息技术助力教学能力提高》感悟
  11. 融跃教育登陆湖南卫视!揭秘融跃是个什么样机构!CFA/FRM/ACCA
  12. listview 和RecycleView区别
  13. 滴滴快车历史奖励政策:含工作日和周末的高峰奖励、翻倍奖励【历史政策】...
  14. 一个编得好的拼音输入法C51的
  15. Python正则表达式中使用findall函数遇到括号嵌套的小坑
  16. IDEA面板中文释义
  17. CAS、AtomicInteger、synchronized原理
  18. matlab实现鬼波信号压制算法  代码实践--第三篇 拉东域鬼波压制
  19. Git和SVN的区别及Git的使用
  20. 无主灯设计:如何让智能照明更加「智能」?

热门文章

  1. 在【Window】系统下更改 【pip install】 默认安装依赖路径
  2. 时间序列分析之一次指数平滑法
  3. 电脑录音文件删除怎么找回——告诉你3个专业方法
  4. 2022-2027年中国中药大健康行业市场调研及未来发展趋势预测报告
  5. hdu 2097 Java Sky数
  6. 将所有视频自动生成虚化背景,支持横竖屏转换
  7. Mac 远程登陆阿里云服务器
  8. TE Edit Control控件介绍
  9. 人工智能机器人的可操作性应用法则
  10. 数据分析学习笔记(六)-- 随机漫步