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

2024-08-31 15:18
文章标签 实现 文档 js 结合 pdf 在线 预览 wabacus

本文主要是介绍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实现在线文档预览的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1124266。

相关文章

HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...
SpringBoot中使用Flux实现流式返回的方法小结

SpringBoot中使用Flux实现流式返回的方法小结

《SpringBoot中使用Flux实现流式返回的方法小结》文章介绍流式返回（StreamingResponse）在SpringBoot中通过Flux实现,优势包括提升用户体验、降低内存消耗、支持长连... 目录背景流式返回的核心概念与优势1. 提升用户体验2. 降低内存消耗3. 支持长连接与实时通信在Sp
阅读更多...
Conda虚拟环境的复制和迁移的四种方法实现

Conda虚拟环境的复制和迁移的四种方法实现

《Conda虚拟环境的复制和迁移的四种方法实现》本文主要介绍了Conda虚拟环境的复制和迁移的四种方法实现,包括requirements.txt,environment.yml,conda-pack,... 目录在本机复制Conda虚拟环境相同操作系统之间复制环境方法一：requirements.txt方法
阅读更多...
Spring Boot 实现 IP 限流的原理、实践与利弊解析

Spring Boot 实现 IP 限流的原理、实践与利弊解析

《SpringBoot实现IP限流的原理、实践与利弊解析》在SpringBoot中实现IP限流是一种简单而有效的方式来保障系统的稳定性和可用性,本文给大家介绍SpringBoot实现IP限... 目录一、引言二、IP 限流原理2.1 令牌桶算法2.2 漏桶算法三、使用场景3.1 防止恶意攻击3.2 控制资源
阅读更多...
springboot下载接口限速功能实现

springboot下载接口限速功能实现

《springboot下载接口限速功能实现》通过Redis统计并发数动态调整每个用户带宽,核心逻辑为每秒读取并发送限定数据量,防止单用户占用过多资源,确保整体下载均衡且高效,本文给大家介绍spring... 目录 一、整体目标 二、涉及的主要类/方法✅ 三、核心流程图解（简化） 四、关键代码详解1️⃣ 设置
阅读更多...
Python中图片与PDF识别文本(OCR)的全面指南

Python中图片与PDF识别文本(OCR)的全面指南

《Python中图片与PDF识别文本(OCR)的全面指南》在数据爆炸时代,80%的企业数据以非结构化形式存在,其中PDF和图像是最主要的载体,本文将深入探索Python中OCR技术如何将这些数字纸张转... 目录一、OCR技术核心原理二、python图像识别四大工具库1. Pytesseract - 经典O
阅读更多...
Nginx 配置跨域的实现及常见问题解决

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享（CORS）2. Nginx 配置跨域的场景2.1
阅读更多...
Python中提取文件名扩展名的多种方法实现

Python中提取文件名扩展名的多种方法实现

《Python中提取文件名扩展名的多种方法实现》在Python编程中,经常会遇到需要从文件名中提取扩展名的场景,Python提供了多种方法来实现这一功能,不同方法适用于不同的场景和需求,包括os.pa... 目录技术背景实现步骤方法一：使用os.path.splitext方法二：使用pathlib模块方法三
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2