hookehuyr

feat(PdfPreview): 增强PDF预览的安全性和交互限制

添加CSS样式和事件监听器防止PDF内容被选择、复制或保存
禁用工具栏和调整默认语言为中文
......@@ -5,7 +5,7 @@
<template>
<van-popup v-if="show" :show="show" @update:show="emit('update:show', $event)" position="right"
:style="{ height: '100%', width: '100%' }">
<div id="pdf-container"></div>
<div id="pdf-container" class="pdf-no-select"></div>
<van-button class="close-btn" type="default" icon="cross" round @click="emit('update:show', false)" />
<van-overlay :show="loading">
<div class="wrapper" @click.stop>
......@@ -68,20 +68,44 @@ const initPdfViewer = () => {
navShow: true,
navigationShow: false,
pdfViewResize: true,
toolShow: true,
download: false,
clearScale: 1.5,
toolShow: false,
download: false, // 禁用下载功能
clearScale: 1.75,
fileName: props.title,
lang: "en",
print: false,
lang: "zh",
print: false, // 禁用打印功能
watermarkOptions: undefined,
customPdfOption: {
// customPdfOption是 pdfjs getDocument 函数中一些配置参数 具体可参考 https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters
cMapPacked: true, //指定 CMap 是否是二进制打包的
cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/", //预定义 Adob​​e CMaps 所在的 URL。可解决字体加载错误
},
// 禁用右键菜单和文本选择
selectConfig: undefined, // 禁用文本选择功能
}
});
// 添加额外的事件监听器来防止长按保存
const pdfContainer = document.querySelector("#pdf-container");
if (pdfContainer) {
// 防止上下文菜单(右键菜单)
pdfContainer.addEventListener('contextmenu', (e) => {
e.preventDefault();
return false;
});
// 防止长按选择
pdfContainer.addEventListener('selectstart', (e) => {
e.preventDefault();
return false;
});
// 防止拖拽
pdfContainer.addEventListener('dragstart', (e) => {
e.preventDefault();
return false;
});
}
});
};
</script>
......@@ -93,6 +117,49 @@ const initPdfViewer = () => {
height: 100%;
}
/* 防止PDF图片被长按保存的样式 */
.pdf-no-select {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
pointer-events: auto; /* 保持可点击 */
}
/* 深度选择器,防止PDF内部图片被保存 */
:deep(.pdf-no-select img) {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
pointer-events: none; /* 禁用图片的所有交互 */
-webkit-user-drag: none; /* 禁止拖拽 */
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
/* 防止右键菜单 */
:deep(.pdf-no-select canvas) {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
pointer-events: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
.close-btn {
position: fixed;
right: 20px;
......