web-dev-qa-db-ja.com

PDFがブラウザから印刷またはダウンロードされたときに検出できますかPDFビューア？

サーバーからPDFドキュメントを読み込み、次のようにページ内に表示するAngularJS Webアプリがあります：

<object id="preview" type="application/pdf" data="blob:{fileUrl}">

ユーザーが特定のアクションを実行するたびに監査する新しい要件があります。

  1. ドキュメントを表示（完了）
  2. ドキュメントを印刷します
  3. ドキュメントをダウンロードします

PDFダウンロードおよび印刷のコントロールはブラウザ内にありますPDFビューア。最新のGoogle Chrome（Chrome 2018年7月現在68）。

PDFビューアからファイルがダウンロードまたは印刷されたことを検出することは可能ですか？beforeprint/afterprintイベントは表示されません。クロスオリジンであると想定しています。必要ありません。ハンドラーを制御するには、何らかの方法でイベントを検出します。

javascriptgoogle-chromepdfprintingdom-events
11
jbkly

独自のPDFビューアを作成してみましたか？

PDFビューアを簡単に利用できるPDFビューアコンポーネントがあります（ボタンへのイベントリスナーの追加、ボタンの配置など）。

私は pdf.js in angularの上に1つを構築したことを覚えています。pdf.jsを使用すると、上記のすべてのユースケースを実装できると確信しています。

7
TheViralGriffin

残念ながら、スクリプトはPDFウィンドウに追加できません。MIMEタイプ"application/pdf"からのものだからです。

PDFをChromeブラウザにロードしてから開発者コンソールを見ると、次のようなコードが表示されます：

<embed width="100%" height="100%" name="plugin" id="plugin"
    src="your-pdf-path.pdf" type="application/pdf" internalinstanceid="7">

私はいくつかのスクリプトをPDFウィンドウに次のように追加しようとしました：

<style type="text/css">html,body{height:100%;margin:0}</style>
<iframe id="iframe1" src="your-pdf-path.pdf" frameborder="0"
    style="display:block;width:100%;height:100%"></iframe>

<script type="text/javascript">
var ifrDoc = document.getElementById('iframe1').contentWindow.document;
var script = ifrDoc.createElement('script');
script.type = 'text/javascript';
script.innerText = 'alert(1)';
//OR: script.src = 'your-js-file-path.js'

ifrDoc.getElementsByTagName('head')[0].appendChild(script);
</script>

ただし、MIMEタイプが"application/pdf"であるため、何も実行されません。

次のように、印刷イベントを検出できますHTMLドキュメントの場合のみ：

function beforePrint(){alert('before print')}

function afterPrint(){alert('after print')}

if(window.onafterprint !== void 0)
{
    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}
else if(window.matchMedia)
{
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql)
    {
        if(mql.matches)
            beforePrint();
        else afterPrint()
    });
}

詳細と使用方法については この記事 を参照してください。

あなたはこのコードを使用できるかもしれませんが、私はこの場合ではないと思います。

このため、独自のPDFビューアを作成する場合にのみ、ソリューションを作成できます。この目標には、たとえばPDF.jsを使用できます。PDF.jsは、Portable Document Format（PDF）ビューアです。これはJavaScriptで記述されています。これはオープンソースであり、完全なソースコードは GitHub here からダウンロードできます。

ダウンロードも同じです（自分のPDFビューアのみ）ですが、以下のリンクを読むことをお勧めします：

そして私の答えがあればあなたの時間を節約できます！

2
Bharata

あなたはそれがブラウザから検出することだと言った。 print()はwindowレベルの関数です。

このリンクからの最初の2つの回答が印刷リスニングに役立つことを願っています。 window.print（）の終了を検出する方法

あなたについて完全なリスナーをダウンロードする、あなたはロジックを実装する必要があります

ドキュメントのダウンロードされた部分が増加していないときにダウンロードの進行状況バーが100％である場合。

その後、印刷が完了したことを意味します。そして、これは、PDFドキュメントをダウンロードするときに完全に機能します。PDFドキュメントは複数のファイルでダウンロードされません。

だから、あなたはプログレスバーを設定しました。ダウンロードしたファイルが各間隔で増分し続けるまで（ここでタイムアウトを設定します）、その進行状況バーを使用します。タイムアウト間隔を待った後でも、ダウンロードしたファイルの増分はありません。それをプログレスバーの終了として定義します。

elementType.onclick = function() { 
        // if progress bar completes when file download stops
        // call downloadcompleted() function           
   }

リンククリックリスナーの場合： JavaScriptでURLに移動するonclick関数を追加しますか？

1
Uddhav Gautam