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

Question

我们有一个AngularJS Web应用程序,可以从服务器加载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 窗口，因为它来自 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()
    });
}

有关更多详细信息及其用途，您可以阅读这篇文章。

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

因此，只有编写自己的 PDF 查看器才能编写解决方案。例如，您可以使用 PDF.js 来实现此目标。PDF.js 是用 JavaScript 编写的便携式文档格式 (PDF) 查看器。它是开源的，您可以在GitHub 上下载完整的源代码。

下载是相同的（仅使用您自己的 PDF 查看器），但我想推荐阅读以下链接：

• 检测浏览器何时接收文件下载。
• 下载 API 的 onCreated() 事件

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

Answer 2

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

有pdf查看器组件随时可用,您可以在其中编辑pdf查看器(例如向按钮添加事件侦听器,定位它们等).

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