Question

我们有一个AngularJS网络应用程序，该应用程序从服务器加载PDF文档，并将其显示在页面中，如下所示：

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

我们有一个新的要求，即只要用户执行某些操作，就必须进行审核：

查看文档（完成）
打印文档
下载文档

PDF下载和打印控件位于浏览器PDF查看器中。我们仅需支持最新的Google Chrome浏览器（截至2018年7月为Chrome 68）。

是否可以检测何时从PDF查看器下载或打印文件？我猜没有看到任何预印/印后事件，因为它是跨源的。我们不需要控制处理程序，只需以某种方式检测事件即可。

Answer 1

您是否尝试过创建自己的pdf查看器？

有一些pdf查看器组件，您可以在其中编辑pdf查看器（例如将事件监听器添加到按钮，放置它们等）。

我记得很久以前在pdf.js的顶部构建了一个。我确信使用pdf.js可以实现所有上述用例。

Answer 2

不幸的是，您无法将任何脚本附加到PDF窗口，因为它来自MIME类型"application/pdf"。

如果您在Chrome浏览器中加载一些PDF，然后查看开发者控制台，则会看到类似以下的代码：

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

有关更多详细信息及其用途，请阅读this article。

也许您可以使用此代码，但我认为这种情况不适用。

因此，仅当您编写自己的PDF查看器时，您才能编写解决方案。您可以为此目的使用PDF.js为例。 PDF.js是使用JavaScript编写的可移植文档格式（PDF）查看器。它是开源的，您可以在GitHub here上下载完整的源代码。

与下载相同（仅对于您自己的PDF查看器），但我建议您阅读以下链接：

也许和我的回答一样，您可以节省时间！

Answer 3

您说这是从浏览器中检测到的。 print()是window级功能。

我希望此链接的前两个答案可以帮助您打印聆听。 how to detect window.print() finish

关于下载完整的侦听器，您需要实现逻辑

如果下载的部分内容的下载进度条为100％文档没有增加。

则表示打印完成。当您下载pdf文件时，这将非常适合您，而不会以多个文件的形式下载。

因此，您设置了一个进度栏。您可以使用该进度条，直到下载的文件在每个间隔中保持递增（在此处设置超时）为止。即使在等待超时间隔后，您也不会增加下载文件的数量，而是将其定义为进度条的结尾。

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

对于链接，请单击侦听器：Adding an onclick function to go to url in JavaScript?

您可以检测何时从浏览器PDF查看器打印或下载PDF吗？

3 个答案: