目錄
web項目引入PDF.js並添加水印禁止下載
普通SSH項目引入PDF.js實現在線預覽PDF文件
1. 下載並引入PDF.js實現預覽
- 官網下載地址：https://mozilla.github.io/pdf.js，下載完成後將壓縮包解壓；
這裏我下載的是pdfjs-2.2.228-dist - 將在WebRoot/script目錄下創建一個pdfjs-dist目錄，將解壓後的文件複製到此目錄下(
僅複製pdfjs-dist下的子目錄即可，根目錄下的文件這裏未進行復制) - 將pdfjs下載時自帶的pdf預覽文件compressed.tracemonkey-pldi-09.pdf複製到WebRoot目錄下用以測試
- 運行web項目，在網頁中預覽該文件，PDF可正常顯示，如提示無法加載
pdf.worker.js文件，可在/web/viewer.js文件中找到如下片段進行修改：
workerSrc: {
value: '../build/pdf.worker.js',
kind: OptionKind.WORKER
}
改爲如下內容：
workerSrc: {
value: '/script/pdfjs-dist/build/pdf.worker.js',
kind: OptionKind.WORKER
}
- 預覽成功即出現以下界面
![在這裏插入圖片描述]()
2. 動態預覽PDF文件
以上步驟只是實現了PDF文件的預覽，下面開始配置動態預覽項目中的PDF文件
- 在WebRoot目錄下創建pdfView目錄(PDF預覽的業務目錄，用作最後Struts2的跳轉視圖路徑)，將pdfjs-dist目錄下的viewer.html文件複製到此目錄下，將後綴改爲jsp，便於後面動態預覽不同的PDF文件
- 實現預覽不同的PDF，只需要將PDF文件加載路徑修改即可，在viewer.jsp的head標籤內中加入如下代碼：
<script type="text/javascript">
var productFilePath = "file=${filePath}";//後臺Action傳入前臺的pdf文件路徑參數賦值給url
</script>
- 然後在viewer.js中找到
functiion webViewerInitialized函數的位置：
var file;
var queryString = document.location.search.substring(1);//修改這行的內容
var params = (0, _ui_utils.parseQueryString)(queryString);
file = 'file' in params ? params.file : _app_options.AppOptions.get('defaultUrl');
validateFileURL(file);
這裏的queryString即從url中讀取file參數來設置文件路徑，將這行進行修改：
var queryString = productFilePath;
- 重新預覽，即可根據前臺不同的預覽鏈接實現不同文件的預覽要求
3. 隱藏打開、下載、打印等功能
-
隱藏功能比較簡單，僅需修改viewer.jsp中的按鈕是否顯示即可，如此處隱藏
打開、下載、打印幾個按鈕在div#toolbarViewerRight下找到id分別爲
openFile、print、download等button，在class屬性中添加visibleMediumView即可隱藏，效果如下：![在這裏插入圖片描述]()
-
如需隱藏
鼠標選擇、查看文檔信息，可在div#secondaryToolbarButtonContainer下找到id分別爲cursorSelectTool、documentProperties，在class屬性中添加visibleMediumView即可：
<button id="documentProperties" class="secondaryToolbarButton documentProperties visibleMediumView" title="Document Properties…" tabindex="68" data-l10n-id="document_properties">
<span data-l10n-id="document_properties_label">Document Properties…</span>
</button>
4. 禁止鍵盤組合按鍵下載或另存爲
- 找到鍵盤組合按鍵打印的位置：
var hasAttachEvent = !!document.attachEvent;
window.addEventListener('keydown', function (event) {
if (event.keyCode === 80 && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {
window.print();
if (hasAttachEvent) {
return;
}
event.preventDefault();
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
} else {
event.stopPropagation();
}
return;
}
}, true);
- 改爲如下內容：
var hasAttachEvent = !!document.attachEvent;
window.addEventListener('keydown', function (event) {
if ((event.keyCode === 80 || event.keyCode === 83) && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {
//window.print();
if (hasAttachEvent) {
return;
}
event.preventDefault();
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
} else {
event.stopPropagation();
}
return;
}
}, false);
重新刷新網頁，此時嘗試通過Ctrrl+P打印或Ctrl+S另存已經不會起作用 原文參考
5. 禁用鼠標操作
- 禁用鼠標選擇、鼠標右鍵等操作，修改
viewer.jsp的body標籤，添加屬性改爲如下內容：
<body tabindex="1" class="loadingInProgress"
tabindex="1" class="loadingInProgress"
oncontextmenu="return false;" leftMargin="0" topMargin="0"
oncopy="return false;" oncut="return false;"
onselectstart="return false">
6. 添加全局水印
利用canvas添加全局水印，其實就是在viewer.js中遍歷文件元素節點的同時，創建水印元素節點並插入到每一頁的位置。原文參考
- 在viewer.js中找到如下內容，位置大概在11973行前後：
if (this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && this.textLayerFactory) {
var textLayerDiv = document.createElement('div');
textLayerDiv.className = 'textLayer';
textLayerDiv.style.width = canvasWrapper.style.width;
textLayerDiv.style.height = canvasWrapper.style.height;
//---這裏就是要插入水印的位置---
if (this.annotationLayer && this.annotationLayer.div) {
div.insertBefore(textLayerDiv, this.annotationLayer.div);
} else {
div.appendChild(textLayerDiv);
}
textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE);
}
- 插入水印代碼後內容如下：
if (this.textLayerMode !== _ui_utils.TextLayerMode.DISABLE && this.textLayerFactory) {
var textLayerDiv = document.createElement('div');
textLayerDiv.className = 'textLayer';
textLayerDiv.style.width = canvasWrapper.style.width;
textLayerDiv.style.height = canvasWrapper.style.height;
//---------------------水印開始---------------------
var cover = document.createElement('div');
cover.className = "cover";
cover.innerText = "內容保密，請勿複製或下載"; //這裏就是水印內容，如果要按照不同的文件顯示不同的水印，可參考pdf文件路徑的傳值方式，在viewer.jsp中head部位接收後臺傳值並在這裏使用
if (this.annotationLayer) {
// annotationLayer needs to stay on top
div.insertBefore(textLayerDiv, this.annotationLayer.div);
div.appendChild(cover);
} else {
div.appendChild(textLayerDiv);
div.appendChild(cover);
}
var coverEle = document.getElementsByClassName('cover'),size = 0,
nowWidth = +canvasWrapper.style.width.split("p")[0],
//714爲100%時，每頁的寬度。對比當前的寬度可以計算出頁面變化後字體的數值
size = 50 * nowWidth / 714 + "px";
for(var i=0, len=coverEle.length; i<len; i++){
coverEle[i].style.fontSize = size;
coverEle[i].style.width = canvasWrapper.style.width;
coverEle[i].style.height = canvasWrapper.style.height / 10;
}
//---------------------水印結束---------------------
if (this.annotationLayer && this.annotationLayer.div) {
div.insertBefore(textLayerDiv, this.annotationLayer.div);
} else {
div.appendChild(textLayerDiv);
}
textLayer = this.textLayerFactory.createTextLayerBuilder(textLayerDiv, this.id - 1, this.viewport, this.textLayerMode === _ui_utils.TextLayerMode.ENABLE_ENHANCE);
}
- 最後在
viewer.css文件開始位置添加水印的css樣式完成水印顯示：
/* 水印遮罩層 */
.cover{
z-index: 100;
position: absolute;
top: 41%;
left: 1%;
transform: rotate(330deg);
text-align: center;
font-size: 310%;
padding-left: 30px;
letter-spacing: 18px;
color:rgba(162, 162, 162, 0.4);
}
6. PDF文件預覽效果
