Java 使用iframe的简单功能页面

初级程序员实现后台功能会用到的简单的,使用iframe小框架的jsp,首先将项目默认访问页面index.jsp(即启动项目时第一个加载的页面)分割画出如下图的上(top部分)、左(left.jsp)、右(right.jsp)三个区块:

top

 

left.jspright.jsp

                                                                                         index.jsp 代码如下:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>  <!-- 此页面将整个页面分为top部分和剩下的部分 -->
   <table align="center" width=100% height=100%>
	 <tr height=47.35px>    <!-- 此行为top的部分 -->
	      <td colspan=2 align="center">
	 	    <h1>主体</h1><h2>${name}</h2>
	      </td>
	  </tr>
	  <tr height=899.65px>   <!-- 此行为left.jsp以下的部分 -->
		  <td  width=384px >
		  		<iframe src="left.jsp" width=384px height=899.65px frameborder="0"</iframe>
		  </td>
		  <td width=1536px  >  <!-- 此行为right.jsp以下的部分 -->
		  	<iframe src="right.jsp"  name="right" width="1536px" height=899.65px                                        
                 frameborder="0"></iframe>
		  </td>
	  </tr>
  </table>
 </body>
</html>

 

如此一个简单的使用iframe的功能界面完成。

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要实现Java Vue实现Word在线预览,可以通过以下步骤: 1. 在Java后端,使用Apache POI库来读取Word文档内容。POI库可以解析Word文档的各种元素,例如段落、表格、图片等。 2. 将读取到的Word文档内容以HTML格式返回给Vue前端。可以使用POI库提供的API将Word内容转换成HTML格式,然后通过Java后端将HTML内容返回给前端。 3. 在Vue前端,使用相应的组件来渲染并显示HTML内容。可以使用著名的富文本编辑器Quill或者其他类似的库,将返回的HTML内容进行渲染,以实现Word文档的显示。 4. 在Vue前端,添加相应的控件和功能来支持在线预览Word文档。可以添加双击文档打开、缩放、左右滚动等交互功能,以提升用户体验。 5. 在Vue前端,添加样式和布局来美化页面。可以采用CSS框架如Bootstrap或Element UI来实现页面的美化和响应式布局,提供更好的用户界面。 需要注意的是,在这个过程中,Java后端负责处理Word文档的读取和转换,将其转化为HTML格式。而Vue前端负责将这个HTML内容进行渲染和显示,提供给用户在线预览的功能。这样,用户就可以通过浏览器直接在线预览Word文档了。 ### 回答2: 要实现Java Vue实现Word在线预览,可以通过以下步骤进行: 1. 首先,使用Vue框架构建前端页面。可以使用Vue的脚手架工具来创建项目,并在项目中安装所需的依赖项(如axios用于发送HTTP请求,element-ui或其他UI库用于页面布局等)。 2. 在Vue的前端页面中创建一个组件,用于上传Word文件。可以使用HTML的`input`元素,并为其添加`type="file"`,当用户选择Word文件时,会触发相应的事件。 3. 在Vue组件中使用axios发送POST请求,将Word文件提交给后端。可以使用axios的`FormData`对象来创建一个表单对象,并将Word文件附加到表单中。 4. 在后端使用Java编写API,用于接收前端提交的Word文件。可以使用Spring Boot框架来搭建Java后端。在API中,使用Java的文件处理功能将接收到的Word文件保存到服务器本地的某个目录中。 5. 使用Java的Apache POI库来解析Word文件。Apache POI提供了对Word文件的读取和操作功能,在后端使用POI库来读取Word文件的内容。 6. 后端将读取到的Word文件内容返回给前端,可以将内容转换为HTML格式,并将其嵌入到前端页面中的一个`<iframe>`元素中。 7. 前端收到后端返回的HTML内容后,使用`<iframe>`元素将其展示在页面中。可以通过设置`<iframe>`元素的`srcdoc`属性,将HTML内容嵌入其中,并通过CSS样式设置适当的宽度和高度。 8. 最后,用户就可以在前端页面中预览上传的Word文件了。可以通过滚动页面来查看整个文件内容,或者自定义一些导航按钮或操作来进行文件的查看和操作。 通过以上步骤,就可以实现Java Vue实现Word在线预览的功能了。要注意的是,这只是一个简单的实现示例,具体的实现方式可能因具体项目需求而有所差异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值