web-dev-qa-db-fra.com

Pouvez-vous détecter quand un PDF est imprimé ou téléchargé à partir du navigateur PDF téléspectateur?

Nous avons une application Web AngularJS qui charge des documents PDF à partir du serveur et les affiche dans la page comme suit:

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

Nous avons une nouvelle exigence d'audit lorsqu'un utilisateur effectue certaines actions: 

  1. affiche un document (terminé)
  2. imprime un document
  3. télécharge un document

Les commandes de téléchargement et d'impression PDF se trouvent dans la visionneuse PDF du navigateur. Nous devons uniquement prendre en charge la dernière version de Google Chrome (Chrome 68 à compter de juillet 2018). 

Est-il possible de détecter le moment où le fichier est téléchargé ou imprimé à partir de la visionneuse PDF? Je ne vois aucun événement beforeprint/afterprint, je suppose, car il s'agit de plusieurs origines. Nous n'avons pas besoin de contrôler les gestionnaires, mais simplement de détecter les événements.

javascriptgoogle-chromepdfprintingdom-events
9
jbkly

Avez-vous essayé de créer votre propre lecteur PDF?

Il existe des composants de visionneuse pdf facilement disponibles où vous pouvez éditer votre visionneur pdf (comme ajouter des écouteurs d'événements aux boutons, les positionner, etc.). 

Je me souviens d’en avoir construit un au-dessus de pdf.js in angular il ya longtemps. Je suis sûr qu'avec pdf.js, vous pouvez implémenter tous les cas d'utilisation mentionnés ci-dessus. 

6
TheViralGriffin

Malheureusement, vous ne pouvez ajouter aucun script à la fenêtre PDF car il s'agit d'un type MIME "application/pdf".

Si vous chargez des PDF dans votre navigateur Chrome, puis consultez la console du développeur, vous verrez du code comme suit:

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

J'ai essayé d'ajouter un script dans la fenêtre PDF comme suit:

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

Mais cela ne fait rien car le type MIME est "application/pdf".

Vous pouvez détecter les événements d'impression uniquement pour les documents HTML comme suit:

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

Pour plus de détails sur et ce qu'il peut être utilisé pour vous, vous pouvez lire cet article .

Peut-être que vous pouvez utiliser ce code mais je ne pense pas pour ce cas.

Pour toutes ces raisons, vous ne pouvez écrire une solution que si vous écrivez votre propre afficheur PDF. Vous pouvez utiliser PDF.js par exemple pour cet objectif. PDF.js est une visionneuse au format PDF qui est écrite en JavaScript. Il est open source et vous pouvez télécharger le code source complet sur GitHub ici .

Et pour le téléchargement est le même (uniquement avec votre propre visionneuse PDF), mais je voudrais recommander de lire les liens suivants:

(Et peut-être avec ma réponse, vous pourriez économiser votre temps!} _

2
Bharata

Vous avez dit que c'est à détecter depuis le navigateur. print() est une fonction de niveau window. 

J'espère que les deux premières réponses de ce lien vous aideront dans votre impression d'écoute. comment détecter window.print () finish

À propos de vous téléchargez le programme d'écoute complet, vous devez implémenter la logique 

si votre barre de progression du téléchargement est à 100% lorsque vous téléchargez une partie du fichier le document n'augmente pas.

alors cela signifie que l'impression est terminée. Et cela fonctionne parfaitement pour vous car vous téléchargez des documents pdf, qui ne sont pas téléchargés dans plusieurs fichiers. 

Donc, vous configurez une barre de progression. Vous utilisez cette barre de progression jusqu'à ce que le fichier téléchargé continue à s'incrémenter à chaque intervalle (vous définissez le délai d'expiration ici). Même après avoir attendu un intervalle de délai, votre fichier téléchargé n'est pas incrémenté, vous définissez cela comme une fin pour votre barre de progression. 

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

Pour le lien, cliquez sur l'écouteur: Ajout d'une fonction onclick pour accéder à l'URL en JavaScript?

1
Uddhav Gautam