PDF 添加点击事件

PDF 添加点击事件

想要给 pdf 添加事件，首先需要在你的 pdf 源文件上添加占位符，（本案例占位符是 usertask），然后使用 iframe 自带的属性获取 iframe 的元素，找到 占位符的父节点，给父节点添加点击样式即可，同时你还可以给占位符的文字设置大小，增加点击区域

// PDF 事件处理
pdfNode() {
    var that = this;
    // 获取 iframe 元素 添加点击事件 headerIframe 是 iframe 的 id viewer 是 iframe 元素下的 id
    var iframeElement = document.getElementById('headerIframe').contentWindow.document.getElementById('viewer');
    // 获取 iframe 元素下所有子元素的集合
    var iframeChildren = iframeElement.children;
    for(var n = 0; n < iframeChildren.length; n++ ) {
        // 获取元素是第几页的pdf
        var pageNumber = iframeChildren[n].getAttribute('data-page-number');
        // 判断当前元素的页码是否和当前页的页码相同 that.page 为当前页的页码
        if(pageNumber == that.page) {
            console.log(that.page);
            console.log(iframeChildren[n]);
            // 获取当前元素下的最后一个直接子元素
            var elementChild =  iframeChildren[n].lastElementChild;
            var elementChildren = elementChild.children;
            console.log(elementChild.hasChildNodes());
            if(elementChild.hasChildNodes() === true) {
                for(var g = 0; g < elementChildren.length; g++) {
                    // 获取元素内容
                    var name = elementChildren[g].innerHTML;
                    console.log(name.indexOf("usertask"));
                    if(name.indexOf("usertask") === 0) {

                    }
                    // 下面方法只执行一次
                    if(name.indexOf("usertask") === 0) {
                        var pageNumber = elementChildren[g].getAttribute('class');
                        if(pageNumber !== 'pointer') {
                            elementChildren[g].className = 'pointer';
                            // 设置内容大小 
                            elementChildren[g].style.fontSize = '30px';
                            // 设置元素鼠标移入样式
                            elementChildren[g].style.cursor = 'pointer';
                            elementChildren[g].addEventListener('click',function(e){
                                that.dialogVisible = true;
                            })
                        }
                    }
                }
            }
            // 设置以下代码是因为本案例 首次进入pdf无法有效的获取 pdf 节点，所以给 page 重新赋值，还用了 watch 监听 page，page 发生变化重新执行本方法
            if(elementChild.hasChildNodes() === false) {
                that.page = pageNumber;
            }
        }
    }
}

注意：该方法需要用到 pdf.js 且使用 iframe 元素搭建的pdf文件， 如果不是使用 iframe 搭建的 pdf，使用该方法无效，如需查询如何使用 iframe ，请移步 博客