open-source/file-online-preview
1
0
Fork 0
mirror of https://gitee.com/kekingcn/file-online-preview.git synced 2026-03-19 23:53:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

word、ppt文档新增图片预览模式

Browse Source
This commit is contained in:
陈精华
2019-04-25 18:39:58 +08:00
committed by kl
parent 68aa5db66b
commit b4d3419797
20 changed files with 312 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
jodconverter-web/src/main/resources/static/images/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 919 B

BIN
jodconverter-web/src/main/resources/static/images/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

BIN
jodconverter-web/src/main/resources/static/images/right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 917 B

41
jodconverter-web/src/main/resources/static/js/lazyload.js Normal file
View File

@@ -0,0 +1,41 @@
function isInSight(el) {
const bound = el.getBoundingClientRect();
const clientHeight = window.innerHeight;
//只考虑向下滚动加载
//const clientWidth=window.innerWeight;
return bound.top <= clientHeight + 100;
}
let index = 0;
function checkImgs() {
const imgs = document.querySelectorAll('.my-photo');
for (let i = index; i < imgs.length; i++) {
if (isInSight(imgs[i])) {
loadImg(imgs[i]);
index = i;
}
}
}
function loadImg(el) {
const source = el.dataset.src;
el.src = source;
}
function throttle(fn, mustRun = 500) {
const timer = null;
let previous = null;
return function() {
const now = new Date();
const context = this;
const args = arguments;
if (!previous) {
previous = now;
}
const remaining = now - previous;
if (mustRun && remaining >= mustRun) {
fn.apply(context, args);
previous = now;
}
}
}

40
jodconverter-web/src/main/resources/web/officePicture.ftl Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>office图片预览</title>
<script src="js/lazyload.js"></script>
<style>
.container{
width:100%;
}
.img-area{
text-align: center
}
</style>
</head>
<body>
<div class="container">
<#list imgurls as img>
<div class="img-area">
<img class="my-photo" alt="loading" data-src="${img}" src="images/loading.gif">
</div>
</#list>
</div>
<img src="images/left.png" style="position: fixed; cursor: pointer; top: 40%; left: 50px; z-index: 999;" alt="PDF预览" onclick="goForPdf()"/>
<script>
window.onload=checkImgs;
window.onscroll = throttle(checkImgs);
function goForPdf() {
var url = window.location.href;
if (url.indexOf("officePreviewType=image") != -1) {
url = url.replace("officePreviewType=image", "officePreviewType=pdf");
} else {
url = url + "&officePreviewType=pdf";
}
window.location.href=url;
}
</script>
</body>
</html>

13
jodconverter-web/src/main/resources/web/pdf.ftl
View File

@@ -17,6 +17,9 @@
<#assign finalUrl="${baseUrl}${pdfUrl}">
</#if>
<iframe src="/pdfjs/web/viewer.html?file=${finalUrl}" width="100%" frameborder="0"></iframe>
<img src="images/right.png" style="position: fixed; cursor: pointer; top: 40%; right: 50px; z-index: 999;" alt="图片预览" onclick="goForImage()"/>
</body>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].height = document.documentElement.clientHeight-10;
@@ -27,5 +30,15 @@
var fm = document.getElementsByTagName("iframe")[0];
fm.height = window.document.documentElement.clientHeight-10;
}
function goForImage() {
var url = window.location.href;
if (url.indexOf("officePreviewType=pdf") != -1) {
url = url.replace("officePreviewType=pdf", "officePreviewType=image");
} else {
url = url + "&officePreviewType=image";
}
window.location.href=url;
}
</script>
</html>