您能否检测到何时从浏览器 PDF 查看器打印或下载 PDF？

Question

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

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

每当用户执行某些操作时，我们都有一个新的审核要求：

1. 查看文档（完成）
2. 打印文档
3. 下载文件

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

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

Answer 1

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

有现成的 pdf 查看器组件，您可以在其中编辑 pdf 查看器（例如向按钮添加事件侦听器、定位它们等）。

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

Answer 2

你说的是从浏览器中检测。 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?

Answer 3

很遗憾，您不能将任何脚本附加到 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 查看器），但我想推荐阅读以下链接：

• Detect when browser receives file download。
• The onCreated() event of the downloads API

也许我的回答可以节省你的时间！