java 实现图片在线预览

最新推荐文章于 2024-05-04 13:53:47 发布

转载最新推荐文章于 2024-05-04 13:53:47 发布 · 6.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://my.oschina.net/u/3507515/blog/3079434

标签

#java #web.xml #javascript #ViewUI

本文介绍了如何使用PageOffice插件在Java应用中实现在线预览用户上传的图片。通过引入PageOffice的jar包，配置web.xml，并在页面中设置a标签或button，结合Image.jsp和javascript，可以实现点击预览图片的功能。用户需先安装插件并注册，然后可以成功预览服务器上的图片。

一、场景

用户上传了一张图片，已有服务器保存路径。需实现点击预览将图片显示在浏览器上。在线预览图片的方法也有很多，比如用<img>标签，也可以用 js 方法等等。

这篇文章主要介绍使用 pageoffice 插件在线实现图片的预览

二、核心代码

大家可能看到api显示的是打开pdf 的方法，别担心，打开图片也是用的这个方法呢。

三、实现过程

1.官网http://www.zhuozhengsoft.com/dowm/下载集成文件，引入jar包，配置web.xml

2.在父页面aaa.jsp(需要打开文档的页面)放一个a标签或者button

写a标签之前先引入pageoffice需要的js文件

<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/pageoffice.js" id="po_js_main"></script>

然后添加a标签

<a href="javascript:POBrowser.openWindowModeless('Image.jsp' , 'width=1200px;height=800px;');">打开图片</a>

3.在父页面同级目录下创建一个名为Image.jsp的文件和test.jpg的图片

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="com.zhuozhengsoft.pageoffice.*, com.zhuozhengsoft.pageoffice.wordwriter.*,java.awt.*"%>
<%

PDFCtrl poCtrl1 = new PDFCtrl(request);
poCtrl1.setServerPage(request.getContextPath()+"/poserver.zz"); //此行必须

// Create custom toolbar
poCtrl1.addCustomToolButton("打印", "Print()", 6);

poCtrl1.addCustomToolButton("-", "", 0);
poCtrl1.addCustomToolButton("实际大小", "SetPageReal()", 16);
poCtrl1.addCustomToolButton("适合页面", "SetPageFit()", 17);
poCtrl1.addCustomToolButton("适合宽度", "SetPageWidth()", 18);
poCtrl1.addCustomToolButton("-", "", 0);
poCtrl1.addCustomToolButton("左转", "RotateLeft()", 12);
poCtrl1.addCustomToolButton("右转", "RotateRight()", 13);
poCtrl1.addCustomToolButton("-", "", 0);
poCtrl1.addCustomToolButton("放大", "ZoomIn()", 14);
poCtrl1.addCustomToolButton("缩小", "ZoomOut()", 15);
poCtrl1.addCustomToolButton("-", "", 0);
poCtrl1.addCustomToolButton("全屏", "SwitchFullScreen()", 4);

poCtrl1.webOpen("doc/test.jpg");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>

 <style>
#main{
	width:1030px;
	height:900px;
	border:#83b3d9 2px solid;
	background:#f2f7fb;
	
}
#shut{
	width:45px;
	height:30px;
	float:right;
	margin-right:-1px;
}
#shut:hover{
	}
</style>
</head>
<body style="overflow:hidden" >

      
    
       <script type="text/javascript">
           function Close() {
               window.external.close();
        }

	</script>
	<!--**************   卓正 PageOffice 客户端代码开始    ************************-->
	<script language="javascript" type="text/javascript">
	    function AfterDocumentOpened() {
	        //alert(document.getElementById("PDFCtrl1").Caption);
	    }
	    function SetBookmarks() {
	        document.getElementById("PDFCtrl1").BookmarksVisible = !document.getElementById("PDFCtrl1").BookmarksVisible;
	    }
	    
	    function PrintFile() {
	        document.getElementById("PDFCtrl1").ShowDialog(4);
	    }
	    function SwitchFullScreen() {
	        document.getElementById("PDFCtrl1").FullScreen = !document.getElementById("PDFCtrl1").FullScreen;
	    }
	    function SetPageReal() {
	        document.getElementById("PDFCtrl1").SetPageFit(1);
	    }
	    function SetPageFit() {
	        document.getElementById("PDFCtrl1").SetPageFit(2);
	    }
	    function SetPageWidth() {
	        document.getElementById("PDFCtrl1").SetPageFit(3);
	    }
	    function ZoomIn() {
	        document.getElementById("PDFCtrl1").ZoomIn();
	    }
	    function ZoomOut() {
	        document.getElementById("PDFCtrl1").ZoomOut();
	    }
	    function FirstPage() {
	        document.getElementById("PDFCtrl1").GoToFirstPage();
	    }
	    function PreviousPage() {
	        document.getElementById("PDFCtrl1").GoToPreviousPage();
	    }
	    function NextPage() {
	        document.getElementById("PDFCtrl1").GoToNextPage();
	    }
	    function LastPage() {
	        document.getElementById("PDFCtrl1").GoToLastPage();
	    }
	    function RotateRight() {
	        document.getElementById("PDFCtrl1").RotateRight();
	    }
	    function RotateLeft() {
	        document.getElementById("PDFCtrl1").RotateLeft();
	    }
	</script>

   
<div id="main">

<div id="content"  style="height:850px;width:1028px;overflow-y:auto;">
<%=poCtrl1.getHtmlCode("PDFCtrl1")%>
</div>
</div> 
  </body>
</html>

启动项目直接访问.此时会提示安装插件,点击安装成功后提示注册,填写相关信息,填写注册码 I7TGD-71VV-FYD8-4NMYP 就可以打开文档.

最终效果

http://www.pageoffice.cn:8080/Samples4/

访问上面的链接看看下面对应的示例

刚开始接触pageoffice的话,也可以看视频快速上手http://www.zhuozhengsoft.com/Technical/

转载于:https://my.oschina.net/u/3507515/blog/3079434