open-source/file-online-preview
1
0
Fork 0
mirror of https://gitee.com/kekingcn/file-online-preview.git synced 2026-04-29 19:46:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #746 from gaoxingzaq/pdfjs2

Browse Source 
pdf 添加跨域功能 修复pdf 页码和高亮没启用bug
This commit is contained in:
陈精华
2026-04-29 14:22:00 +08:00
committed by GitHub
parent 634babfba4 4cf19d1dbe
commit 4ea1d7468a
4 changed files with 181 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
server/src/main/resources/static/js/pdfwatermark.js
View File

@@ -1,69 +0,0 @@
function isNotEmpty(value) {
return value !== null && value !== undefined && value !== '' && value !== 'false' ;
}
function watermarkObj(watermarkContainer,watermarkTxt) {
try {
if (!isNotEmpty(watermarkTxt)) {
return ;
}
var watermarkSettings = {
watermark_txt: watermarkTxt,
watermark_start_x:80,//水印起始位置x轴坐标
watermark_start_y:80,//水印起始位置Y轴坐标
watermark_x_space:80,//水印x轴间隔
watermark_y_space:80,//水印y轴间隔
watermark_color:'black',//水印字体颜色
watermark_alpha:0.2,//水印透明度
watermark_fontsize:'18px',//水印字体大小
watermark_font:'微软雅黑',//水印字体
watermark_width:200,//水印宽度
watermark_height:80,//水印高度
watermark_angle:30//水印倾斜度数
};
// console.log(watermarkContainer);
var page_width = $(watermarkContainer).width() - watermarkSettings.watermark_width;
var page_height = $(watermarkContainer).height() - watermarkSettings.watermark_height;
page_width = (page_width < 250) ? 250 : page_width;
page_height = (page_height < 250) ? 250 : page_height;
var oTemp = document.createDocumentFragment();
for (var x = watermarkSettings.watermark_start_x; x < page_width; x+= watermarkSettings.watermark_x_space) {
for (var y = watermarkSettings.watermark_start_y; y < page_height; y+= watermarkSettings.watermark_y_space) {
var mask_div = document.createElement('div');
// mask_div.id = 'mask_div' + x + y;
mask_div.className = 'mask_div';
mask_div.appendChild(document.createTextNode(watermarkTxt));
// 设置水印div倾斜显示
mask_div.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity="+(watermarkSettings.watermark_alpha*100)+")";
mask_div.style.webkitTransform = "rotate(-" + watermarkSettings.watermark_angle + "deg)";
mask_div.style.MozTransform = "rotate(-" + watermarkSettings.watermark_angle + "deg)";
mask_div.style.msTransform = "rotate(-" + watermarkSettings.watermark_angle + "deg)";
mask_div.style.OTransform = "rotate(-" + watermarkSettings.watermark_angle + "deg)";
mask_div.style.transform = "rotate(-" + watermarkSettings.watermark_angle + "deg)";
mask_div.style.visibility = "";
mask_div.style.position = "absolute";
mask_div.style.left = x + 'px';
mask_div.style.top = y + 'px';
mask_div.style.overflow = "hidden";
mask_div.style.zIndex = "100";
mask_div.style.pointerEvents='none';//pointer-events:none 让水印不遮挡页面的点击事件
//mask_div.style.border="solid #eee 1px";
mask_div.style.opacity = watermarkSettings.watermark_alpha;
mask_div.style.fontSize = watermarkSettings.watermark_fontsize;
mask_div.style.fontFamily = watermarkSettings.watermark_font;
mask_div.style.color = watermarkSettings.watermark_color;
mask_div.style.textAlign = "center";
mask_div.style.width = watermarkSettings.watermark_width + 'px';
mask_div.style.height = watermarkSettings.watermark_height + 'px';
mask_div.style.display = "block";
oTemp.appendChild(mask_div);
}
}
$(watermarkContainer).append(oTemp);
} catch (e) {
console.log(e);
}
}

2
server/src/main/resources/static/pdfjs/web/viewer.html
View File

@@ -1221,8 +1221,6 @@ See https://github.com/adobe-type-tools/cmap-resources
<!-- editorUndoBar -->
</div>
<!-- outerContainer -->
<script type="text/javascript" src="/js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="/js/pdfwatermark.js"></script>
<div id="printContainer"></div>
</body>
</html>

165
server/src/main/resources/static/pdfjs/web/viewer.mjs
View File

@@ -9,6 +9,83 @@ if (kkpdfAutoFetch == "true") {
} else {
kkpdfAutoFetch = false
}
function isNotEmpty(value) {
return value !== null && value !== undefined && value !== '' && value !== 'false' ;
}
/**
* 通用水印生成函数
* @param {HTMLElement} container - 水印容器（相对定位的父元素）
* @param {string} watermarkTxt - 水印文字
* @param {number} [explicitWidth] - 可选：显式指定容器宽度（px），不传则自动获取
* @param {number} [explicitHeight] - 可选：显式指定容器高度（px），不传则自动获取
*/
function addWatermark(container, watermarkTxt, explicitWidth = null, explicitHeight = null) {
if (!isNotEmpty(watermarkTxt)) return;
// 公共配置
const settings = {
start_x: 80,
start_y: 80,
x_space: 80,
y_space: 80,
color: 'black',
alpha: 0.2,
fontsize: '18px',
font: '微软雅黑',
width: 200,
height: 80,
angle: 30
};
// 确定实际使用的宽高
let pageWidth, pageHeight;
if (explicitWidth !== null && explicitHeight !== null) {
pageWidth = explicitWidth;
pageHeight = explicitHeight;
} else {
const rect = container.getBoundingClientRect();
pageWidth = rect.width;
pageHeight = rect.height;
}
let maxX = pageWidth - settings.width;
let maxY = pageHeight - settings.height;
maxX = Math.max(maxX, 250);
maxY = Math.max(maxY, 250);
const fragment = document.createDocumentFragment();
for (let x = settings.start_x; x < maxX; x += settings.x_space) {
for (let y = settings.start_y; y < maxY; y += settings.y_space) {
const div = document.createElement('div');
div.className = 'mask_div';
div.appendChild(document.createTextNode(watermarkTxt));
div.style.cssText = `
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=${settings.alpha * 100});
transform: rotate(-${settings.angle}deg);
visibility: visible;
position: absolute;
left: ${x}px;
top: ${y}px;
overflow: hidden;
z-index: 100;
pointer-events: none;
opacity: ${settings.alpha};
font-size: ${settings.fontsize};
font-family: ${settings.font};
color: ${settings.color};
text-align: center;
width: ${settings.width}px;
height: ${settings.height}px;
display: block;
`;
fragment.appendChild(div);
}
}
container.appendChild(fragment);
}
/******/ var __webpack_modules__ = ({
/***/ 34:
@@ -13874,37 +13951,43 @@ class PDFPrintService {
};
return new Promise(renderNextPage);
}
useRenderedPage() {
useRenderedPage() {
this.throwIfInactive();
const img = document.createElement("img");
this.scratchCanvas.toBlob(blob => {
img.src = URL.createObjectURL(blob);
});
const wrapper = document.createElement("div");
wrapper.className = "printedPage";
wrapper.style.position = "relative";
// 获取当前页面的尺寸（单位：点，1pt=1/72英寸）
const pageSizePt = this.pagesOverview[0];
// 转换为 CSS 像素（1pt = 96/72 px）
const pageWidthPx = pageSizePt.width * 96 / 72;
const pageHeightPx = pageSizePt.height * 96 / 72;
// 设置 wrapper 尺寸（CSS 像素）
wrapper.style.width = `${pageWidthPx}px`;
wrapper.style.height = `${pageHeightPx}px`;
wrapper.style.backgroundColor = "white";
this.scratchCanvas.toBlob(blob => {
img.src = URL.createObjectURL(blob);
});
wrapper.append(img);
var printWatermarkDiv = document.createElement('div');
// console.log(pageSize);
printWatermarkDiv.style.position = 'absolute';
printWatermarkDiv.style.left = '0px';
printWatermarkDiv.style.top = '0px';
printWatermarkDiv.style.width = '1024px';
printWatermarkDiv.style.height = pageSize.height*pageCount+ "px";
watermarkObj(printWatermarkDiv,watermarkTxt);
wrapper.appendChild(printWatermarkDiv);
this.printContainer.append(wrapper);
const {
promise,
resolve,
reject
} = Promise.withResolvers();
img.onload = resolve;
const { promise, resolve, reject } = Promise.withResolvers();
img.onload = () => {
// 使用专用函数生成水印，直接传入页面像素尺寸
addWatermark(wrapper, watermarkTxt, pageWidthPx, pageHeightPx);
resolve();
};
img.onerror = reject;
promise.catch(() => {}).then(() => {
URL.revokeObjectURL(img.src);
URL.revokeObjectURL(img.src);
});
return promise;
}
}
performPrint() {
this.throwIfInactive();
return new Promise(resolve => {
@@ -17612,7 +17695,7 @@ class PDFPageView extends BasePDFPageView {
}
});
}
watermarkObj(div,watermarkTxt);
addWatermark(div,watermarkTxt);
if (!this.annotationLayer && this.#annotationMode !== AnnotationMode.DISABLE) {
const {
annotationStorage,
@@ -23083,24 +23166,26 @@ initCom(PDFViewerApplication);
}
{
const HOSTED_VIEWER_ORIGINS = new Set(["null", "http://mozilla.github.io", "https://mozilla.github.io"]);
var validateFileURL = function (file) {
if (!file) {
return;
}
const viewerOrigin = URL.parse(window.location)?.origin || "null";
if (HOSTED_VIEWER_ORIGINS.has(viewerOrigin)) {
return;
}
const fileOrigin = URL.parse(file, window.location)?.origin;
if (fileOrigin === viewerOrigin) {
return;
}
const ex = new Error("file origin does not match viewer's");
PDFViewerApplication._documentError("pdfjs-loading-error", {
message: ex.message
});
throw ex;
};
var validateFileURL = function (file) {
if (!file) {
return;
}
const viewerOrigin = URL.parse(window.location)?.origin || "null";
if (HOSTED_VIEWER_ORIGINS.has(viewerOrigin)) {
return;
}
/* 注释掉跨域检查
const fileOrigin = URL.parse(file, window.location)?.origin;
if (fileOrigin === viewerOrigin) {
return;
}
const ex = new Error("file origin does not match viewer's");
PDFViewerApplication._documentError("pdfjs-loading-error", {
message: ex.message
});
throw ex;
*/
};
var onFileInputChange = function (evt) {
if (this.pdfViewer?.isInPresentationMode) {
return;

84
server/src/main/resources/web/pdf.ftl
View File

@@ -1,55 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
<title>PDF预览</title>
<#include "*/commonHeader.ftl">
<script src="js/base64.min.js" type="text/javascript"></script>
<style>
/* 简单全屏布局，无滚动条 */
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
.img-preview {
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
z-index: 999;
width: 48px;
height: 48px;
}
</style>
</head>
<body>
<#if pdfUrl?contains("http://") || pdfUrl?contains("https://")>
<#assign finalUrl="${pdfUrl}">
<#else>
<#assign finalUrl="${baseUrl}${pdfUrl}">
</#if>
<iframe src="" width="100%" frameborder="0"></iframe>
<iframe id="pdfFrame" src="about:blank"></iframe>
<#if "false" == switchDisabled>
<img src="images/jpg.svg" width="48" height="48" style="position: fixed; cursor: pointer; top: 40%; right: 48px; z-index: 999;" alt="使用图片预览" title="使用图片预览" onclick="goForImage()"/>
<img class="img-preview" src="images/jpg.svg" alt="使用图片预览" title="使用图片预览" onclick="goForImage()"/>
</#if>
</body>
<script type="text/javascript">
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var url = '${finalUrl}';
var kkagent = '${kkagent}';
var baseUrl = '${baseUrl}'.endsWith('/') ? '${baseUrl}' : '${baseUrl}' + '/';
if (kkagent === 'true' || !url.startsWith(baseUrl)) {
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url))+ "&key=${kkkey}";
}
document.getElementsByTagName('iframe')[0].src = "${baseUrl}pdfjs/web/viewer.html?file=" + encodeURIComponent(url) + "&disablepresentationmode=${pdfPresentationModeDisable}&disableopenfile=${pdfOpenFileDisable}&disableprint=${pdfPrintDisable}&disabledownload=${pdfDownloadDisable}&disablebookmark=${pdfBookmarkDisable}&disableediting=${pdfDisableEditing}#page=1&pagemode=thumbs";
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;
url = baseUrl + 'getCorsFile?urlPath=' + encodeURIComponent(Base64.encode(url)) + "&key=${kkkey}";
}
var viewerUrl = baseUrl + "pdfjs/web/viewer.html?file=" + encodeURIComponent(url);
var watermarkEncoded = encodeURIComponent('${watermarkTxt?js_string}');
var highlightEncoded = encodeURIComponent('${highlightall?js_string}');
viewerUrl += "&disablepresentationmode=${pdfPresentationModeDisable}";
viewerUrl += "&disableopenfile=${pdfOpenFileDisable}";
viewerUrl += "&disableprint=${pdfPrintDisable}";
viewerUrl += "&disabledownload=${pdfDownloadDisable}";
viewerUrl += "&disablebookmark=${pdfBookmarkDisable}";
viewerUrl += "&disableediting=${pdfDisableEditing}";
viewerUrl += "&watermarktxt=" + watermarkEncoded;
viewerUrl += "&pdfhighlightall=" + highlightEncoded;
viewerUrl += "#page=${page}"; // ?c 确保数字不包含千位分隔符
viewerUrl += "&pagemode=thumbs";
var iframe = document.getElementById('pdfFrame');
iframe.src = viewerUrl;
// 图片预览切换
function goForImage() {
var url = window.location.href
if (url.indexOf("officePreviewType=pdf") != -1) {
url = url.replace("officePreviewType=pdf", "officePreviewType=image");
var href = window.location.href;
if (href.indexOf("officePreviewType=pdf") !== -1) {
href = href.replace("officePreviewType=pdf", "officePreviewType=image");
} else {
url = url + "&officePreviewType=image";
href += (href.indexOf('?') === -1 ? '?' : '&') + "officePreviewType=image";
}
window.location.href = url;
}
/*初始化水印*/
window.onload = function () {
initWaterMark();
window.location.href = href;
}
</script>
</html>
</body>
</html>