Re: Printing the popup note text

[Kai Brümmer]

Dear Matt,

I got it to work, but I get an additional page with the popup texts for each page of the document (Page1 printed = Page1 from document, Page2 printed = Comments from Page1 of the document, Page3 printed = Page2 from document, Page4 printed = Comments from Page2 of the document, and so on...)

Thank you in advance
Regards Kai

Am Freitag, 19. September 2014 19:42:48 UTC+2 schrieb Matt Parizeau:

Q:

When printing a page with annotations it doesn't seem to be printing the popup notes. Is there a way to do that?

A:

The popup notes for annotations are not printed as part of the page. What you could do is have a summary of the notes (similar to Acrobat) where the text of the notes is printed on the following page. As an example here is a simple implementation of this:

In ReaderControl.js find the loadPageLoop function. Inside that function you'll see the line me.fireEvent('printProgressChanged', ...). Just after that line add the following code:

var annotManager = me.docViewer.GetAnnotationManager();
var pageNotes = annotManager.GetAnnotationsList().filter(function(annot) {
    return annot.PageNumber === pages[pageIndex];
});

if (pageNotes.length > 0) {
    var noteTextContainer = $('<div style="page-break-after:always">').appendTo(printDisplay);

    pageNotes.forEach(function(annot) {
        noteTextContainer.append('<div>' + annot.Subject + ' (' + annot.Author + '): ' + annot.getContents() + '</div>');
    });
}

This will add a page immediately following the document page which contains the text of the annotations' notes. You could format or style this page however you like.

[Kai Brümmer]

Dear Matt,

I tried to do this, but the page is not added to the printout.

[Matt Parizeau]

Hi Kai,

The expected behavior of the sample code is to add a page of notes after each page as you saw. The sample code is just to get you started so you could change the layout of this as you like. If you want the page to take up less space and the notes to be beside it on the same page then you could modify the code to layout the elements like this. Try playing around with the sample code to make the layout exactly how you like.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Kai Brümmer]

Hi Matt,
thank you, I'm getting close to the goal, but now I try to add a number to the annotation just to mark which text belongs to which annotation. So I add a div in front of the img and use getX() and getY() for the position. But x and y seem not to be the pixel values of the right and top position. How can I calculate the top and right position out of the x and y values?

Thank you in advance
Regards Kai

[Matt Parizeau]

Hi Kai,

If you want to add numbers on the page itself beside each annotation here's a simple example. Just add this code inside loadPageLoop but just above the line dataurl = canvas.toDataURL() because it's drawing the numbers on the canvas, not adding extra elements.

var ctx = canvas.getContext('2d');

var annotManager = me.docViewer.GetAnnotationManager();
var pageNotes = annotManager.GetAnnotationsList().filter(function(annot) {
    return annot.PageNumber === pages[pageIndex];
});

pageNotes.forEach(function(annot, i) {
    ctx.fillText(i + 1, annot.X, annot.Y);
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Kai Brümmer]

Thank you, that works fine now. :-)

[Matt Parizeau]

Q:

When printing a page with annotations it doesn't seem to be printing the popup notes. Is there a way to do that?

A:

The popup notes for annotations are not printed as part of the page. What you could do is have a summary of the notes (similar to Acrobat) where the text of the notes is printed on the following page. As an example here is a simple implementation of this:

In BaseReaderControl.js find the loadPageLoop function. Inside that function you'll see the line printDisplay.append(img) followed by me.fireEvent('printProgressChanged', ...). Just after that line add the following code:

var annotManager = me.docViewer.getAnnotationManager();
var pageNotes = annotManager.getAnnotationsList().filter(function(annot) {
    return annot.Listable && annot.PageNumber === pages[index] && !annot.isReply();

});

if (pageNotes.length > 0) {
    var noteTextContainer = $('<div style="page-break-after:always">').appendTo(printDisplay);

    pageNotes.forEach(function(annot) {
        noteTextContainer.append('<div>' + annot.Subject + ' (' + annot.Author + '): ' + annot.getContents() + '</div>');

        annot.getReplies().sort(function(a1, a2) {
            return a1.DateCreated - a2.DateCreated;
        }).forEach(function(replyAnnot) {
            noteTextContainer.append('<div>&nbsp;' + replyAnnot.Subject + ' (' + replyAnnot.Author + '): ' + replyAnnot.getContents() + '</div>');
        });
        noteTextContainer.append('<br/>');
    });
}

This will add a page immediately following the document page which contains the text of the annotations' notes. You could format or style this page however you like.

If you are not using XOD documents then you'll also need to disable the built in browser printing for Chrome. You can do that by adding the following code in your config file:

window.isPDFiumSupported = function() {
  return Promise.resolve(false);
};

If you want to display the comments on the same page, beside the page, then the following code will get you started:

var annotManager = me.docViewer.getAnnotationManager();
var pageNotes = annotManager.getAnnotationsList().filter(function(annot) {
  return annot.Listable && annot.PageNumber === pages[index] && !annot.isReply();
});

if (pageNotes.length > 0) {
  var $this = $(this);
  $this.css('max-width', '70%');

  var noteTextContainer = $('<div>').css({
    position: 'absolute',
    right: 0,
    width: '28%'
  });

  var getAnnotText = function(annot) {
    var subject = annot.Subject || '[No Subject]';
    var author = annot.Author || '[No Author]';

    return subject + ' (' + author + '): ' + annot.getContents();
  };

  pageNotes.forEach(function(annot) {
    noteTextContainer.append('<div>' + getAnnotText(annot) + '</div>');
    annot.getReplies().sort(function(a1, a2) {
      return a1.DateCreated - a2.DateCreated;
    }).forEach(function(replyAnnot) {
      noteTextContainer.append('<div style="margin-left: 20px">' + getAnnotText(replyAnnot) + '</div>');
    });
    noteTextContainer.append('<br/>');
  });

  noteTextContainer.insertBefore($this);
}