埋め込んだPDFを印刷させない方法（PDF.js）

はじめに

• PDF.jsを使用
• そのものをいじリます
• 全てCSSだけで対応可能
• PDF直接見られた時は対応不可（一般ユーザはそこまでたどり着かないと想定）

実装方法

まず埋め込む

<iframe src="web/viewer.html?file=../sample.pdf"></iframe>

ファイルのパスは適宜変更。

印刷時、PDF部分を表示させない

viewer.cssに下記追加

@media print {
  body {
    display: none;
  }
}

印刷画面では、エリアだけ保持され、その部分が表示されない。
開発者しかやらないと思うが、仮に埋め込んだURLにアクセスされ、そこで印刷しても表示されない。
※PDF本来のURLに直アクセスされれば、印刷もDLもできてしまうが、一般ユーザの操作ではそこまでできないと想定

余分なボタンを消す

さっきと同じく、viewer.cssに下記追加。

#print, #secondaryPrint {
  display: none !important;
}

ブラウザ上で操作される印刷ボタンを消す
↓こういう部分

ダウンロードもさせたくなければ、適宜IDを調べて、そのボタンも消す。

ツールバーを消す

いっそのことツールバーを消したほうがスッキリかも…？
その場合は、ツールバーの高さ分だけ変な余白ができるので、#viewerContainerの位置を調整する。

.toolbar {
  display: none;
}
#viewerContainer {
  top: 0;
}