Wabacus结合PDF.js实现在线文档预览

本文主要是介绍Wabacus结合PDF.js实现在线文档预览，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先，我们需要了解一下什么是在线预览，能够实现文档在线预览的工具有很多，简单举一两个例子：

OpenOffice

 该工具是实现了真正意义上的文档在线预览打印，因为它支持Office全部类型，包括图片在内。在预览的过程中，需要SWFTools将文件转换Adobe Flash文件（SWF文件），最终展示出来。虽然它展示的效果非常好，但个人觉得插件有点多，使用时还必须开启服务，整体来说比较麻烦。

启动OpenOffice服务：

C:cd C:\Program Files (x86)\OpenOffice 4\programsoffice -headless -accept="socket,host=127.0.0.1,port=8100;urp;" -nofirststartwizardOpenOfficeUnoServernetstat -anp tcp

WebOffice

支持全部Office菜单，支持Office2000(2003/2007/2010/2013/2016)以上版本的打印预览，也是一个非常不错的控件。

PDF.JS

相对于以上两种工具，PDFJS是在线预览PDF的一款神器。 对于PC端浏览器，一般直接提供pdf文件，iframe一下就可以直接预览PDF文档。

LibreOffice 6.1

LibreOffice是一款非常不错的文档转换工具，主要将不同类型的文档转换成PDF文件，可作为PDF.JS的辅助工具来使用。

本文讲述的就是Wabacus结合PDF.js实现在线文档预览：

report_ViewWerPDF.xml

<?xml version="1.0" encoding="UTF-8"?>
<applications xmlns="http://www.wabacus.com"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.wabacus.com ../xsd/wabacus.applications.xsd"><page id="ViewWerPDF"><hpanel id="hpanel12" parenttitle="有边框" margin="10px" border="0"><vpanel id="vpanel11" parenttitle="无边框" margin="10px" border="0" width="800px"><report id="report1" title="面试/待邀约" type="editablelist" template="/pdfreview/web/HRPDFPersonInfo.jsp"><display><col column="c01" displaytype="hidden"></col><col column="c02" label="姓名"><inputbox type="textbox" servervalidate="isNotEmpty(#label#不允许为空)" servervalidatetype="both"></inputbox></col><col column="c26" label="学历" br="true"><inputbox type="selectbox" servervalidate="isNotEmpty(#label#不允许为空)"><option dataset="@{select dict_label from sys_dict_data where dict_type = 'sys_qualification'}" label="dict_label" value="dict_label"></option></inputbox></col><col column="c27" label="工作经验" br="true"></col><col column="c39" label="性别"></col><col column="c03" label="应聘职位" br="true"><inputbox type="selectbox" servervalidate="isNotEmpty(#label#不允许为空)" servervalidatetype="both"><option dataset="@{select c02 from A04}" label="c02" value="c02"></option></inputbox></col><col column="c41" label="招聘部门" br="true"></col><col column="c30" label="投递渠道" br="true"><inputbox type="selectbox" servervalidate="isNotEmpty(#label#不允许为空)"><option dataset="@{select dict_label from sys_dict_data where dict_type = 'sys_reCanals'}" label="dict_label" value="dict_label"></option></inputbox></col><col column="c04" label="手机号码"><inputbox type="textbox" servervalidate="isNotEmpty(#label#不允许为空)" servervalidatetype="both"></inputbox> jsvalidate="isPhone(手机号[ #data# ]填写有误)"</col><col column="c40" label="邮箱"><inputbox type="textbox" servervalidate="isNotEmpty(#label#不允许为空)" jsvalidate="isEmail(邮箱[ #data# ]格式不正确)" servervalidatetype="both"></inputbox></col><col column="c38" label="文件所在目录"></col></display><sql><value><![CDATA[select c01,c02,c03,c04,c26,c27,c30,c38,c39,c40,c41 from A05  where c09 != '放弃邀约' and {#condition#};]]></value><condition name="c01" label="c01" hidden="true" ><value><![CDATA[(c01 like '#data#' )]]></value></condition></sql></report><report id="report2" title="简历预览" template="/pdfreview/web/HRPDFViewer.jsp"><display><col column="c01" label="ID" displaytype="hidden" /><col column="c38" label="文件所在目录"></col></display><sql><select><value><![CDATA[select c01,c38 from A05  where {#condition#};]]></value><condition name="c01" label="c01" hidden="true" ><value><![CDATA[(c01 like '#data#' )]]></value></condition></select></sql></report></vpanel><report id="report3" title="操作记录" type="editablelist" template="/pdfreview/web/HandleRecords.jsp"><display><col column="c01" label="ID" displaytype="hidden" /><col column="c02" label="操作人"></col><col column="c03" label="操作时间"></col><col column="c04" label="操作类型"></col><col column="c06" label="面试时间"></col><col column="c10" label="职务"></col><col column="c11" label="评价"></col><col column="c12" label="面试官"></col><!-- <col column="c13" label="评价部门类别"></col> --><col column="c14" label="评价部门类别"></col><col column="c15" label="语言表达"></col><col column="c16" label="工作经验"></col><col column="c17" label="个人规划"></col><col column="c18" label="专业特质"></col><col column="c19" label="核心价值观"></col><col column="c20" label="思维态度"></col><col column="c21" label="总结"></col><col column="c22" label="建议薪资"></col><col column="c23" label="面试结果"></col><col column="c24" label="评价部门类别"></col></display><sql><select><value><!-- SELECT c01,c02,c03,c04,c06,c10,c11,c12 FROM A12 WHERE {#condition#}; --><![CDATA[SELECT c01,c02,c03,c04,c06,c10,c11,c12,c13,c14,c15,c16,c17,c18,c19,c20,c21,c22,c23,c24 FROM A12 WHERE {#condition#};]]></value><condition name="c01" label="c01" hidden="true" ><value><![CDATA[(c09 like '#data#' )]]></value></condition></select></sql></report></hpanel></page>
</applications>

HRPDFPersonInfo.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%@ taglib uri="wabacus" prefix="wx"%>
<%@ page import="com.wabacus.system.ReportRequest,com.wabacus.util.Consts"%>
<!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>
<!-- <link href="../../zhaopin/css/button.css" rel="stylesheet" type="text/css" /> -->
</head>
<%ReportRequest rrequest=(ReportRequest)request.getAttribute("WX_REPORTREQUEST");
%>
<%String id=rrequest.getColDisplayValue("report1","c01",0);	// 上传文件所在的目录
%>
<body><div style="background:#ccc;width:102%;height:40px;vertical-align: middle;" id="butTitle"><span><button id="back" onclick="javascript:history.go(-1);">返回</button></span><span style="margin-left:60%;"><button onclick="send();" style="margin-top: 10px;">发起邀约</button></span><span style="margin-left:10%;"><button onclick="cancel();">放弃邀约</button></span></div><%-- <div><span><wx:data col="c01" showlabel="true" showdata="true" /></span></div> --%><div id="personInfo"><div><span><wx:data col="c02" showlabel="true" showdata="true"/><a style="margin-left: 90%;font-size:18px;" href='javascript:void(0)' onclick="wx_winpage('/OA/ShowReport.wx?PAGEID=UpdatePersonInfo&id=<%=id %>',{width:'50%',height:'40%',title:'修改应聘者个人信息'})">✍</a></span></div><div><span><wx:data col="c03" showlabel="true" showdata="true"/>/<wx:data col="c41" showlabel="true" showdata="true"/></span></div><div><span><wx:data col="c26" showlabel="true" showdata="true"/></span></div><div>手机号码：<span><wx:data col="c04" showlabel="true" showdata="true"/></span>&nbsp;&nbsp;邮箱：<span><wx:data col="c40" showlabel="true" showdata="true"/></span></div>	</div>
</body>
<script>function send(){wx_winpage("/OA/ShowReport.wx?PAGEID=Invitations&ids="+"'<%=id %>'", {width:'45%',height:'50%'});}function cancel(){wx_winpage("/OA/ShowReport.wx?PAGEID=GiveUpInvitations&ids="+"'<%=id %>'", {width:'45%',height:'50%'});}
</script>
</html>

HandleRecords.jsp

<%@page import="com.itextpdf.text.log.SysoLogger"%>
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%@ taglib uri="wabacus" prefix="wx"%>
<%@ page import="com.wabacus.system.ReportRequest,com.wabacus.util.Consts"%>
<%@page import="com.wabacus.system.ReportRequest"%><!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>
<style>
/* span{color:blue;
} */
.hfont{color:blue;/* #F00 */font-weight:bold;
}
.titDiv{background:#ccc;width:100%;height:40px;margin-top: 10px;text-align: center;line-height: 40px;font-weight: bold;
}
</style>
</head>
<%ReportRequest rrequest=(ReportRequest)request.getAttribute("WX_REPORTREQUEST");
%>
<body><div id="titDiv" class="titDiv" id="recordTitle">操作记录</div><%-- <wx:data/><br/> --%>
<% int size=rrequest.getReportDataListSize("report3");if(size>0){
%><table width="100%" cellspacing="1"><!-- bgcolor="#ff7d00" -->
<%for(int i=0;i<size;i++){String flag = rrequest.getColDisplayValue("report3","c24",i);//System.out.println("-------------------------" +flag);Integer chose=3;if(flag==null){chose = 3;}else{chose=Integer.parseInt(flag);}switch (chose){case 0:
%><tr><td colspan= 6><div id="recordInfo"><div><span><%=rrequest.getColDisplayValue("report3","c03",i).substring(0, rrequest.getColDisplayValue("report3","c03",i).lastIndexOf(".")) %></span></div><!-- 取消时间,截取的目的是处理yMdhms.0 --><div><span><%=rrequest.getColDisplayValue("report3","c02",i) %></span>（<span><%=rrequest.getColDisplayValue("report3","c10",i) %></span>）：<span class="hfont"><%=rrequest.getColDisplayValue("report3","c04",i) %></span></div><div>面试官：<span><%=rrequest.getColDisplayValue("report3","c12",i)==null?"未指定":rrequest.getColDisplayValue("report3","c12",i) %></span></div><div>仪表风范：<span><%=rrequest.getColDisplayValue("report3","c14",i)==null?"":rrequest.getColDisplayValue("report3","c14",i) %></span></div><div>语言表达：<span><%=rrequest.getColDisplayValue("report3","c15",i)==null?"":rrequest.getColDisplayValue("report3","c15",i) %></span></div><div>工作经验：<span><%=rrequest.getColDisplayValue("report3","c16",i)==null?"":rrequest.getColDisplayValue("report3","c16",i) %></span></div><div>个人规划：<span><%=rrequest.getColDisplayValue("report3","c17",i)==null?"":rrequest.getColDisplayValue("report3","c17",i) %></span></div><div>总结：<span><%=rrequest.getColDisplayValue("report3","c21",i)==null?"":rrequest.getColDisplayValue("report3","c21",i) %></span></div><div>建议薪资：<span><%=rrequest.getColDisplayValue("report3","c22",i)==null?"":rrequest.getColDisplayValue("report3","c22",i) %>元/月</span></div><div>面试结果：<span><%=rrequest.getColDisplayValue("report3","c23",i)==null?"":rrequest.getColDisplayValue("report3","c23",i) %></span></div><div>评价部门类别：HR部门评价</div><%-- <div>评价部门类别：<span><%=rrequest.getColDisplayValue("report3","c24",i)==null?"":rrequest.getColDisplayValue("report3","c24",i) %></span></div> --%></div><br></td></tr>
<%case 1:%><tr><td colspan= 6><div id="recordInfo"><div><span><%=rrequest.getColDisplayValue("report3","c03",i).substring(0, rrequest.getColDisplayValue("report3","c03",i).lastIndexOf(".")) %></span></div><!-- 取消时间,截取的目的是处理yMdhms.0 --><div><span><%=rrequest.getColDisplayValue("report3","c02",i) %></span>（<span><%=rrequest.getColDisplayValue("report3","c10",i) %></span>）：<span class="hfont"><%=rrequest.getColDisplayValue("report3","c04",i) %></span></div><div>面试官：<span><%=rrequest.getColDisplayValue("report3","c12",i)==null?"未指定":rrequest.getColDisplayValue("report3","c12",i) %></span></div><div>专业特质：<span><%=rrequest.getColDisplayValue("report3","c18",i)==null?"":rrequest.getColDisplayValue("report3","c18",i) %></span></div><div>核心价值观：<span><%=rrequest.getColDisplayValue("report3","c19",i)==null?"":rrequest.getColDisplayValue("report3","c19",i) %></span></div><div>思维态度：<span><%=rrequest.getColDisplayValue("report3","c20",i)==null?"":rrequest.getColDisplayValue("report3","c20",i) %></span></div><div>总结：<span><%=rrequest.getColDisplayValue("report3","c21",i)==null?"":rrequest.getColDisplayValue("report3","c21",i) %></span></div><div>建议薪资：<span><%=rrequest.getColDisplayValue("report3","c22",i)==null?"":rrequest.getColDisplayValue("report3","c22",i) %>元/月</span></div><div>面试结果：<span><%=rrequest.getColDisplayValue("report3","c23",i)==null?"":rrequest.getColDisplayValue("report3","c23",i) %></span></div><div>评价部门类别：用人部门评价</div><%-- <div>评价部门类别：<span><%=rrequest.getColDisplayValue("report3","c24",i)==null?"":rrequest.getColDisplayValue("report3","c24",i) %></span></div> --%></div><br></td></tr><%default:%><tr><td colspan= 6><div id="recordInfo"><div><span><%=rrequest.getColDisplayValue("report3","c03",i).substring(0, rrequest.getColDisplayValue("report3","c03",i).lastIndexOf(".")) %></span></div><!-- 取消时间,截取的目的是处理yMdhms.0 --><div><span><%=rrequest.getColDisplayValue("report3","c02",i) %></span>（<span><%=rrequest.getColDisplayValue("report3","c10",i) %></span>）：<span class="hfont"><%=rrequest.getColDisplayValue("report3","c04",i) %></span></div><div>面试官：<span><%=rrequest.getColDisplayValue("report3","c12",i)==null?"未指定":rrequest.getColDisplayValue("report3","c12",i) %></span></div></div><br></td></tr><%}}
%></table>
<%				}
%>				
</body>
</html>

效果图如下：

 

这篇关于Wabacus结合PDF.js实现在线文档预览的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---