java实现图⽚在线预览
⼀、场景
⽤户上传了⼀张图⽚,已有服务器保存路径。需实现点击预览将图⽚显⽰在浏览器上。在线预览图⽚的⽅法也有很多,⽐如 ⽤<img>标签,也可以⽤ js ⽅法等等。
这篇⽂章主要介绍使⽤ pageoffice 插件在线实现图⽚的预览
⼆、核⼼代码
⼤家可能看到api显⽰的是打开pdf 的⽅法,别担⼼,打开图⽚也是⽤的这个⽅法呢。
三、实现过程
1.官⽹下载集成⽂件,引⼊jar包,配置l
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);
PDFCtrl poCtrl1 = new PDFCtrl(request);
poCtrl1.ContextPath()+"/"); //此⾏必须
// 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 >
<script type="text/javascript">
function Close() {
}
</script>
<!--**************  卓正 PageOffice 客户端代码开始    ************************-->
<script language="javascript" type="text/javascript">
function AfterDocumentOpened() {
//ElementById("PDFCtrl1").Caption);
}
function SetBookmarks() {
function PrintFile() {
}
}
function SwitchFullScreen() {
}
function SetPageReal() {
}
function SetPageFit() {
}
function SetPageWidth() {
}
function ZoomIn() {
}
function ZoomOut() {
}
function FirstPage() {
}
function PreviousPage() {
}
function NextPage() {
}
function LastPage() {
}
function RotateRight() {
jquery在线库ElementById("PDFCtrl1").RotateRight();
}
function RotateLeft() {
}
</script>
<div id="main">
<div id="content"  >
<%=HtmlCode("PDFCtrl1")%>
</div>
</div>
</body>
</html>
启动项⽬直接访问.此时会提⽰安装插件,点击安装成功后提⽰注册,填写相关信息,填写注册码    I7TGD-71VV-FYD8-4NMYP  就可以打开⽂档.
最终效果
访问上⾯的链接看看下⾯对应的⽰例
刚开始接触pageoffice的话,也可以看视频快速上⼿
转载于:my.oschina/u/3507515/blog/3079434

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。