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

最新推荐文章于 2024-06-05 17:16:34 发布
最新推荐文章于 2024-06-05 17:16:34 发布
阅读量2.6k 收藏 9
点赞数
分类专栏： 实战前后端 文章标签： java vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nothing_ness/article/details/114884205
版权

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:
最低0.47元/天 解锁文章
虚无-无限
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue实现html格式（富文本编辑器）导出word
peppa_pig的博客
06-24 2210
目录1.导入需要的包2.引入3.点击事件实现导出html-docx-js和file-saver 2.引入 3.点击事件实现导出
Java + html 实现excel的导出
weixin_41221717的博客
01-13 1211
excel的导出 引入相关的excel导出的jar包（maven方式） <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.2.3</version> </dependency> <dependency> <groupId>o
vue 3.0(通用) 表格（HTML）导出成Excel文件或HTML转word文档
苦夏木禾
05-17 5493
HTML导出excel、word
vue中实现将html导出为word/excel
Stitch_xiao的博客
06-22 5273
需求：将页面整成理想样式，将想要的那一部分页面导出成word,不用写模板，按照当前页面样式导出即可。第四步：获取dom节点myContainer并导出（我写的行内样式）第二步：给到处那部分的容器起个id名。第三步：在需要的地方引入依赖。第一步：安装需要的依赖。
vue中html导出成word
最新发布
morningttt的博客
06-05 354
参考链接：https://blog.csdn.net/weixin_47494533/article/details/137018678。vue 中将 html 中内容转换为 word 文档导出，无需模板，可以导出 echarts 图表。先将html中内容获取，之后将页面上的元素转成图片,然后把图片放到word文件中进行导出。使用 html-docx-js、file-saver。2、创建 exportToWord.js，添加导出方法。
java html 导出word
xuewenbo111的博客
11-28 1521
记录下工作内容   /*          * @b 为html原文的byte流   byte b[] = content.getBytes("utf-8"); 参考          */         public void downloadWord( byte[] b, OutputStream out)                  throws Exception {     ...
Java+vue前后端分离智慧云智能教育平台源码
06-14
试卷管理：支持将试卷导出成word文档、html页面进行打印、支持富文本图片导出到word 试卷批改功能：支持教师后台批改试卷，主观题系统自动评分、非主观题由教师评分、错题可设置添加到学员错题本 RBCA权限管理：主要...
基于springboot+vue的在线文档管理系统的设计与实现（Java毕设，附源码，数据库，教程）.zip
03-08
Java 毕业设计，Java 课程设计，基于 SpringBoot+Vue 开发的，含有代码注释，有一定基础的可以看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、...
VUE动态生成word的实现
10-15
主要介绍了VUE动态生成word的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
若依使用easypoi导出word文档.docx
04-26
在本场景中，我们将探讨如何使用Easypoi库来实现导出Word文档的功能。Easypoi是一个强大的Java办公组件，能够方便地处理Excel和Word文档，尤其适合于数据批量导入导出和模板生成。 首先，我们需要在项目的`pom.xml`...
Spring Boot中实现列表数据导出为Excel文件
02-22
它是Apache软件基金会的一个开源项目，提供了多种API来处理Office文档，包括Word、Excel、PowerPoint等。Apache POI的主要目标是提供一种简单、可靠的方式来使用Java程序操作这些常见的文件格式。 Apache POI库的...
java导出html word文档_java生成带html样式的word文件
weixin_29725791的博客
02-16 836
根据上面的，现在我们只需要在服务器建一个.doc的文件，然后再把我们的带html样式的文本写到这个文件中，再下载到客户端就可以了下面实现的代码，首先写一个工具类用来生成word文件package net.uni.util;import java.io.File;import java.io.FileOutputStream;import java.io.OutputStreamWriter;/**...
java根据html生成word文档,Java之HTML富文本导出WORD（不含图片）
weixin_39640372的博客
06-03 1022
一、需求：我们在使用富文本编辑器来编辑文本的时候，文本会自带HTML的标签比如 等来修饰字体样式。比如ueditor、kindeditor等富文本编辑器。那么，我们如何将富文本编辑器里的内容导出到word文档里？二、思路：word文档是可以识别完整的html页面的，所以我们需要将首尾缺失的标签补齐。1.首先我们需要建立一个word导出的工具类：/*** html 导出 word 工具类* @aut...
利用java相关技术把页面导出成word文档
cxhcx的博客
11-03 1190
1.前端页面功能实现 function dc(){ var xhh = new XMLHttpRequest(); xhh.open("post", 'xxx/xxx/downloadDoc');//url xhh.responseType = 'blob'; xhh.setRequestHeader("Authorization",sessionStorage.getItem("token"));//写入token xhh.s
vue3 + vite自定义封装vue + element-ui 表格组件，发布到npm包的全过程。
三拾的博客
03-13 4417
当我们项目中用到的表格太多的话，就会导致我们的代码量一直增加，所以我们要封装一个公共得组件，通过传参引入来使用，下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下。
java将前端传给后端的文字写入到word中
m0_62317155的博客
02-23 488
java中将前端传给后端的文字写入到word中
JAVA 操作blob数据然后生成word文件
javaSamBlog
09-05 1678
import java.io.*; import java.sql.*; public class Test { Connection con = null; Statement stmt = null; ResultSet rs = null; private ResultSet getResultSet() { try { Class.forN...
Java+vue实现家谱前后端分离系统
06-13
要实现Java+Vue的家谱前后端分离系统，可以分为以下几个步骤： 1. 设计数据库表结构：可以设计Person表来存储每个人的信息，包括姓名、性别、父亲ID、母亲ID等字段。 2. 创建Java后端API：使用Spring Boot框架创建后端API，提供获取所有人、获取某个人、添加人等接口，通过JPA或MyBatis等框架操作数据库。 3. 创建Vue前端页面：使用Vue框架创建前端页面，包括家谱的展示、添加人、查找人等功能，使用axios等库调用后端API获取数据或提交数据。 以下是Java+Vue实现家谱前后端分离系统的示例代码： Java后端API： ```java @RestController @RequestMapping("/api") public class FamilyTreeController { @Autowired private PersonRepository personRepository; @GetMapping("/people") public List<Person> getAllPeople() { return personRepository.findAll(); } @GetMapping("/person/{id}") public Person getPerson(@PathVariable Long id) { return personRepository.findById(id).orElse(null); } @PostMapping("/person") public Person addPerson(@RequestBody Person person) { return personRepository.save(person); } } ``` Vue前端页面： ```html <template> <div> <h1>家谱</h1> <ul> <li v-for="person in people" :key="person.id"> {{ person.name }} <ul> <li v-for="child in getChildren(person)" :key="child.id"> {{ child.name }} </li> </ul> </li> </ul> <div> <h2>添加人</h2> <form @submit.prevent="addPerson"> <label>姓名：</label> <input type="text" v-model="newPerson.name"> <label>性别：</label> <select v-model="newPerson.gender"> <option value="male">男</option> <option value="female">女</option> </select> <label>父亲：</label> <select v-model="newPerson.fatherId"> <option v-for="person in people" :value="person.id" :key="person.id"> {{ person.name }} </option> </select> <label>母亲：</label> <select v-model="newPerson.motherId"> <option v-for="person in people" :value="person.id" :key="person.id"> {{ person.name }} </option> </select> <button type="submit">添加</button> </form> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { people: [], newPerson: { name: '', gender: 'male', fatherId: null, motherId: null } } }, created() { this.loadPeople(); }, methods: { loadPeople() { axios.get('/api/people') .then(response => { this.people = response.data; }); }, getChildren(person) { return this.people.filter(p => p.fatherId == person.id || p.motherId == person.id); }, addPerson() { axios.post('/api/person', this.newPerson) .then(response => { this.people.push(response.data); this.newPerson = { name: '', gender: 'male', fatherId: null, motherId: null }; }); } } } </script> ``` 在上面的代码中，`FamilyTreeController`类是Java后端API的实现，提供获取所有人、获取某个人、添加人等接口。`vue`文件是Vue前端页面的实现，包括家谱的展示、添加人等功能。通过axios等库调用后端API获取数据或提交数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值