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

版权声明：版权所有@嘉乐集团总公司 https://blog.csdn.net/u013199013/article/details/83141817

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

OpenOffice

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

启动OpenOffice服务：

C:

cd C:\Program Files (x86)\OpenOffice 4\program

soffice -headless -accept="socket,host=127.0.0.1,port=8100;urp;" -nofirststartwizard

OpenOfficeUnoServer

netstat -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>

效果图如下：