mirror of
https://gitee.com/kekingcn/file-online-preview.git
synced 2025-10-27 03:09:30 +08:00
添加pdfjs预览pdf文件
This commit is contained in:
liou
@@ -55,22 +55,9 @@
|
||||
},
|
||||
onClick:function (event, treeId, treeNode) {
|
||||
if (!treeNode.directory) {
|
||||
/**实现窗口最大化**/
|
||||
var fulls = "left=0,screenX=0,top=0,screenY=0,scrollbars=1"; //定义弹出窗口的参数
|
||||
if (window.screen) {
|
||||
var ah = screen.availHeight - 30;
|
||||
var aw = (screen.availWidth - 10) / 2;
|
||||
fulls += ",height=" + ah;
|
||||
fulls += ",innerHeight=" + ah;
|
||||
fulls += ",width=" + aw;
|
||||
fulls += ",innerWidth=" + aw;
|
||||
fulls += ",resizable"
|
||||
} else {
|
||||
fulls += ",resizable"; // 对于不支持screen属性的浏览器，可以手工进行最大化。 manually
|
||||
}
|
||||
window.open(env_config.server_preview_url
|
||||
+ encodeURIComponent(env_config.server_base_url + treeNode.fileName)
|
||||
+ "&needEncode=1", "_blank",fulls);
|
||||
var winHeight = window.document.documentElement.clientHeight-10;
|
||||
window.open("${baseUrl}onlinePreview?url=" + encodeURIComponent("${baseUrl}" + treeNode.fileName) + "&needEncode=1",
|
||||
"_blank", "height=" + winHeight + ",top=80,left=80,toolbar=no, menubar=no, scrollbars=yes, resizable=yes");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
26
jodconverter-web/src/main/resources/web/html.ftl
Normal file
26
jodconverter-web/src/main/resources/web/html.ftl
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
body{
|
||||
margin: 0;
|
||||
padding:0;
|
||||
border:0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="${pdfUrl}" width="100%" frameborder="0"></iframe>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
document.getElementsByTagName('iframe')[0].height = document.documentElement.clientHeight-10;
|
||||
/**
|
||||
* 页面变化调整高度
|
||||
*/
|
||||
window.onresize = function(){
|
||||
var fm = document.getElementsByTagName("iframe")[0];
|
||||
fm.height = window.document.documentElement.clientHeight-10;
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
172
jodconverter-web/src/main/resources/web/index.ftl
Normal file
172
jodconverter-web/src/main/resources/web/index.ftl
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>图片预览图</title>
|
||||
<link rel="stylesheet" href="css/viewer.min.css">
|
||||
<link rel="stylesheet" href="css/loading.css">
|
||||
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.css" />
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>文件预览项目接入和测试界面</h1>
|
||||
<div class="panel-group" id="accordion">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion"
|
||||
href="#collapseOne">
|
||||
接入说明
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<div>
|
||||
如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以
|
||||
成功实现：
|
||||
<pre style="background-color: #2f332a;color: #cccccc">
|
||||
$scope.openWin = function (fileUrl) {
|
||||
var url = configuration.previewUrl + encodeURIComponent(fileUrl);
|
||||
var winHeight = window.document.documentElement.clientHeight-10;
|
||||
$window.open(url, "_blank", "height=" + winHeight
|
||||
+ ",top=80,left=80,toolbar=no, menubar=no, scrollbars=yes, resizable=yes");
|
||||
};
|
||||
</pre>
|
||||
<b>说明:</b>
|
||||
<p>1.这里的fileUrl即是需要预览的服务器文件，一般是ufile文件</p>
|
||||
<p>2.只所以使用encodeURIComponent转码是因为ufile文件中可能会存在&等特殊字符，那么如果不转码会被浏览器处理成多参数
|
||||
这样后台获取的就不是需要预览的文件的全路径了。</p>
|
||||
<p>3.configuration.previewUrl是需要接入项目中配置文件预览项目的地址的配置
|
||||
现在开发和测试地址都是：
|
||||
http://106.75.31.215:8012/onlinePreview?url=服务器(ufile)文件路径</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion"
|
||||
href="#collapseTwo">
|
||||
预览测试
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
<p style="color: red;">因为是测试所以一种文件只允许上传一个</p>
|
||||
<div style="padding: 10px">
|
||||
<form enctype="multipart/form-data" id="fileUpload">
|
||||
<input type="file" name="file" />
|
||||
<input type="button" id="btnsubmit" value=" 上 传 " />
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<table id="table" data-pagination="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="loading_container">
|
||||
<div class="spinner">
|
||||
<div class="spinner-container container1">
|
||||
<div class="circle1"></div>
|
||||
<div class="circle2"></div>
|
||||
<div class="circle3"></div>
|
||||
<div class="circle4"></div>
|
||||
</div>
|
||||
<div class="spinner-container container2">
|
||||
<div class="circle1"></div>
|
||||
<div class="circle2"></div>
|
||||
<div class="circle3"></div>
|
||||
<div class="circle4"></div>
|
||||
</div>
|
||||
<div class="spinner-container container3">
|
||||
<div class="circle1"></div>
|
||||
<div class="circle2"></div>
|
||||
<div class="circle3"></div>
|
||||
<div class="circle4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="config.js"></script>
|
||||
<script src="js/jquery-3.0.0.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdn.bootcss.com/jquery.form/3.09/jquery.form.min.js" type="text/javascript"></script>
|
||||
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js"></script>
|
||||
<script>
|
||||
function deleteFile(fileName) {
|
||||
$.ajax({
|
||||
url: '${baseUrl}deleteFile?fileName=' + encodeURIComponent(fileName),
|
||||
success: function (data) {
|
||||
// 删除完成，刷新table
|
||||
if (1 == data.code) {
|
||||
alert(data.msg);
|
||||
}else{
|
||||
$('#table').bootstrapTable('refresh', {});
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
console.log(data);
|
||||
}
|
||||
})
|
||||
}
|
||||
$(function () {
|
||||
$('#table').bootstrapTable({
|
||||
url: 'listFiles',
|
||||
columns: [{
|
||||
field: 'fileName',
|
||||
title: '文件名'
|
||||
}, {
|
||||
field: 'action',
|
||||
title: '操作'
|
||||
},]
|
||||
}).on('pre-body.bs.table', function (e,data) {
|
||||
// 每个data添加一列用来操作
|
||||
$(data).each(function (index, item) {
|
||||
item.action = "<a class='btn btn-default' target='_blank' href='${baseUrl}onlinePreview?url="
|
||||
+ encodeURIComponent('${baseUrl}' + item.fileName ) +"&needEncode=1'>预览</a>" +
|
||||
"<a class='btn btn-default' target='_blank' href='javascript:void(0);' onclick='deleteFile(\""+item.fileName+"\")'>删除</a>";
|
||||
});
|
||||
return data;
|
||||
}).on('post-body.bs.table', function (e,data) {
|
||||
return data;
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function showLoadingDiv() {
|
||||
var height = window.document.documentElement.clientHeight - 1;
|
||||
$(".loading_container").css("height", height).show();
|
||||
}
|
||||
|
||||
$("#btnsubmit").click(function () {
|
||||
showLoadingDiv();
|
||||
$("#fileUpload").ajaxSubmit({
|
||||
success: function (data) {
|
||||
// 上传完成，刷新table
|
||||
if (1 == data.code) {
|
||||
alert(data.msg);
|
||||
}else{
|
||||
$('#table').bootstrapTable('refresh', {});
|
||||
}
|
||||
$(".loading_container").hide();
|
||||
},
|
||||
error: function (error) { alert(error); $(".loading_container").hide();},
|
||||
url: 'fileUpload', /*设置post提交到的页面*/
|
||||
type: "post", /*设置表单以post方法提交*/
|
||||
dataType: "json" /*设置返回值类型为文本*/
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -11,7 +11,12 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="${pdfUrl}" width="100%" frameborder="0"></iframe>
|
||||
<#if pdfUrl?contains("http://")>
|
||||
<#assign finalUrl="${pdfUrl}">
|
||||
<#else>
|
||||
<#assign finalUrl="${baseUrl}${pdfUrl}">
|
||||
</#if>
|
||||
<iframe src="/pdfjs/web/viewer.html?file=${finalUrl}" width="100%" frameborder="0"></iframe>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
document.getElementsByTagName('iframe')[0].height = document.documentElement.clientHeight-10;
|
||||
|
||||
@@ -15,7 +15,8 @@
|
||||
<h1>如果图片质量很好，首次加载图片时间可能会有点长，请耐心等待</h1>
|
||||
|
||||
<ul id="dowebok">
|
||||
<li><img id="Imgbox" src="#" width="800px" height="auto"></li>
|
||||
<li><img id="Imgbox" src="#" width="800px" height="550px"></li>
|
||||
|
||||
</ul>
|
||||
<script src="js/viewer.min.js"></script>
|
||||
<script>
|
||||
@@ -25,7 +26,6 @@
|
||||
document.getElementById("Imgbox").src =document.getElementById("url").value;
|
||||
}
|
||||
var viewer = new Viewer(document.getElementById('dowebok'), {url: 'src'});
|
||||
viewer.show();
|
||||
</script>
|
||||
<input name="url" value="${imgurl}" type="hidden" id="url" >
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user