PDF.jsダウンロードの導入を禁止するWebプロジェクトおよび追加透かし

ディレクトリ
WebプロジェクトとPDF.jsダウンロードの導入を禁止する透かしを追加

ダウンロードして導入PDF.jsプレビュー
ダイナミックプレビューPDFファイル
隠されたオープン、ダウンロード、印刷およびその他の機能
禁止キーボードの組み合わせや名前を付けて保存]ボタンをダウンロード
無効マウス
グローバル・ウォーターマークを追加します
PDFファイルのプレビュー

オンラインプレビューPDFファイルのためのSSH導入PDF.js共通プロジェクト

ダウンロードして導入PDF.jsプレビュー
ダウンロードが完了したアーカイブの解凍した後、//mozilla.github.io/pdf.js;ここで私はpdfjs-2.2.228-distのをダウンロードします。https：公式ウェブサイトのアドレスをダウンロード
（のみpdfjs-distの下のサブディレクトリがここに再現されていないルートディレクトリにファイルをコピーすることができます）、このディレクトリを抽出した後、ファイルをコピーし、ウェブルート/スクリプトディレクトリの下pdfjs-distのディレクトリが作成されます
pdfjsは、ウェブルートディレクトリにPDFプレビューファイルcompressed.tracemonkey-pldi-09.pdfをダウンロードする際に、テストコピーに来ます
ロードされたpdf.worker.jsファイルすることはできません、このようなヒントとして、PDFが正しく表示することができ、Webページ内のファイルをプレビューし、Webプロジェクトを実行し、/web/viewer.jsファイルで変更するには、以下のスニペットで見つけることができます：

workerSrc: {
    value: '../build/pdf.worker.js',
    kind: OptionKind.WORKER
}

改为如下内容：

workerSrc: {
    value: '/script/pdfjs-dist/build/pdf.worker.js',
    kind: OptionKind.WORKER
}

プレビューに成功し、次の画面が表示されます
ダイナミックプレビューPDFファイル

上記の手順では、唯一のPDFファイルは、以下のプロジェクトのダイナミックプレビューの設定を開始、プレビューPDFファイルを実現しています

（最終パスStruts2の観点でのジャンプとして、PDFプレビューサービスのディレクトリ）ディレクトリに作成PdfView webrootディレクトリは、このディレクトリ、JSPへの接尾辞の下にファイルviewer.htmlのpdfjs-distのディレクトリにコピーし、後で容易にするために、異なる動的プレビューPDFファイル
別のプレビューPDFを達成するため、PDFファイルは、頭部のみタグviewer.jspに次のコードを追加し、パスを変更する必要がロードされます。

<script type="text/javascript">
   var productFilePath = "file=${filePath}";//后台Action传入前台的pdf文件路径参数赋值给url
</script>

そして、見つけた場所のfunctiionは中viewer.jsで関数を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;

再プレビュー、あなたは別の受信プレビューリンクのさまざまな要件に応じてファイルをプレビューすることができます
隠されたオープン、ダウンロード、印刷およびその他の機能
非表示機能はとてもオープン、ダウンロードで隠され、いくつかのボタンを印刷することができる唯一のボタンが表示されているviewer.jsp修正が必要な、比較的単純です

Idはクラス属性以下の効果で、非表示にvisibleMediumViewを追加、のOpenFile、印刷、ダウンロードおよびその他のボタンだったのdiv＃toolbarViewerRightで見つかった：
ここに画像を挿入説明
選択するには、マウスを非表示にするには2、ビューの文書情報は、のdiv＃secondaryToolbarButtonContainer IDで見つけることができますそれぞれcursorSelectToolは、のDocumentProperties、あなたはクラス属性に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つの無効にするキーパッドのキーを組み合わせとしてダウンロードまたは保存された
キーボードのキーの組み合わせ1.印刷を探します。

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);

2.次のように置き換えます：

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);

印刷またはCtrl + S記述参照は何も影響がありません保存するためにCtrrl + Pを試行し、ページを更新
5.無効にし、マウスの
マウスを選択するには、disable、マウスの右ボタンなどを、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">

グローバル・ウォーターマークを追加します

使用は、実際には、viewer.jsで同じ時間をドキュメント要素ノードを通過する電子透かしの要素ノードを作成し、各ページの位置に挿入され、世界的な透かしを追加するキャンバス。オリジナルリファレンス

図1は、場所、おそらく周りの11973行、viewer.jsで次のが見つかりました：

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);
}

2.透かしのコードを挿入した後、以下のようになります。

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);
}

3最後に、ファイルのCSSスタイルのショーの完全な透かしのviewer.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ファイルのプレビュー
ここに画像を挿入説明

dxyzhbb

リリース7件のオリジナルの記事・ウォン称賛11 ・ビュー80000 +

プライベートの手紙の懸念

PDF.jsダウンロードの導入を禁止するWebプロジェクトおよび追加透かし

おすすめ