Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
mlaj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-10-20 15:09:31 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
f6776f943f23cda4d5182a609eba594d18d7f112
f6776f94
1 parent
173af9e9
feat(PdfPreview): 增强PDF预览的安全性和交互限制
添加CSS样式和事件监听器防止PDF内容被选择、复制或保存 禁用工具栏和调整默认语言为中文
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
73 additions
and
6 deletions
src/components/ui/PdfPreview.vue
src/components/ui/PdfPreview.vue
View file @
f6776f9
...
...
@@ -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:
tru
e,
download: false,
clearScale: 1.5,
toolShow:
fals
e,
download: false,
// 禁用下载功能
clearScale: 1.
7
5,
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/", //预定义 Adobe 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;
...
...
Please
register
or
login
to post a comment