Wabacus結合PDF.js實現線上文件預覽
阿新 • • 發佈：2018-11-11
首先，我們需要了解一下什麼是線上預覽，能夠實現文件線上預覽的工具有很多，簡單舉一兩個例子：
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> 郵箱：<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>效果圖如下：
