如何在pdfJs上显示注释链接

Question

我已经实现了 pdfjs 库来在我的应用程序中显示 pdf。 我已经成功显示pdf了。但pdf上的链接不可点击。因为我想点击链接来访问链接。

pdf vsrsion：2.10.377

下面是我的代码希望你能理解。

   <div id="canvasPDFViewer" class="canvasPDFViewer"></div>
   <div  class="annotationLayer" id=”annotation-layer”></div>

这是我包含的js。

<script defer>
    window.pdfjsLib.GlobalWorkerOptions.workerSrc = '/_js/pdf.worker.min.js';
</script>

这是我显示pdf的代码，pdf是可见的，但是链接不可点击。

let loadingTask = pdfjsLib.getDocument(url);

loadingTask.promise.then(function(pdf) {
    let totalPageNumber = pdf.numPages;
    for(let pageNumber = 1; pageNumber <= totalPageNumber; pageNumber++) {
        pdf.getPage(pageNumber).then(function(page) {
        
            let scale = 1;
            let viewport = page.getViewport({ scale: scale }); // Prepare canvas using PDF page dimensions
            let canvas = document.createElement("canvas"); // Render PDF page into canvas context
            canvas.height = viewport.height;
            canvas.width = viewport.width;
        
            let canvasContext = canvas.getContext("2d");
            let renderContext = {
                canvasContext: canvasContext,
                viewport: viewport
            };
            //page.render(renderContext);
            page.render(renderContext).promise.then(function() {
            return page.getAnnotations();
            }).then(function(annotationData) {
                if(annotationData.length == 0)
                return;
                 var pdf_canvas = $(canvas).offset(); 
                  $("#annotation-layer").css({ left: pdf_canvas.left + "px", top: pdf_canvas.top +          "px", height: pdf_canvas + "px", width: pdf_canvas + "px" });
                  
                  pdfjsLib.AnnotationLayer.render({
                        viewport: viewport.clone({ dontFlip: true }),
                        div: $("#annotation-layer").get(0),
                        annotations: annotationData,
                        page: page
                    });
            });
            document.getElementById("canvasPDFViewer").appendChild(canvas);
            
        });
    }
}, function (reason) {
  // PDF loading error
  // console.error(reason);
});

错误是我得到了。

pdf.min.js:22 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'externalLinkTarget')
    at LinkAnnotationElement.render (pdf.min.js:22:1)
    at Function.render (pdf.min.js:22:1)
    at eval (eval at <anonymous> (jquery.min.js:2:1), <anonymous>:32:48)

为什么我收到错误。

我已经尝试了以下链接的解决方案。 [https://usefulangle.com/post/94/javascript-pdfjs-enable-annotation-layer]

但运气不佳。

Answer 1

有类似的问题，我相信在使用

pdfjsLib.AnnotationLayer.render

时，必须提供

linkService

参数，请参阅https://github.com/mozilla/pdf.js/blob/master/src/display/注释_layer.js#L2611

有关示例，请参阅 https://github.com/mozilla/pdf.js/blob/master/examples/components/simpleviewer.js#L44

但是，

EventBus

和

PDFLinkService

是在pdf查看器中定义的，而不是在

window['pdfjs-dist/build/pdf']

中定义的。我确实相信要获得这些，除了

web/pdf_viewer.js

之外，您还必须导入

build/pdf.js

（假设您正在使用 https://www.npmjs.com/package/pdfjs-dist），现在您可以访问这些

window["pdfjs-dist/web/pdf_viewer"]

有两节课。

---

我现在只是过滤掉所有链接注释，因为我只需要表单：

pdfjsLib.AnnotationLayer.render({
    viewport: viewport, //.clone({ dontFlip: true }),
    div: $("#annotation-layer").get(0),
    annotations: annotationData.filter(o => o.subtype !== 'Link'),
    page: page
});