Annotations in PDFKit

Annotations are interactive features of the PDF format, and they make itpossible to include things like links and attached notes, or to highlight,underline or strikeout portions of text. Annotations are added using thevarious helper methods, and each type of annotation is defined by a rectangleand some other properties. Here is a list of the available annotation methods:

  • note(x, y, width, height, contents, options)
  • link(x, y, width, height, url, options)
  • highlight(x, y, width, height, options)
  • underline(x, y, width, height, options)
  • strike(x, y, width, height, options)
  • lineAnnotation(x1, y1, x2, y2, options)
  • rectAnnotation(x, y, width, height, options)
  • ellipseAnnotation(x, y, width, height, options)
  • textAnnotation(x, y, width, height, text, options)
    Many of the annotations have a color option that you can specify. You canuse an array of RGB values, a hex color, or a named CSS color value for thatoption.

If you are adding an annotation to a piece of text, such as a link orunderline, you will need to know the width and height of the text in order tocreate the required rectangle for the annotation. There are two methods thatyou can use to do that. To get the width of any piece of text in the currentfont, just call the widthOfString method with the string you want tomeasure. To get the line height in the current font, just call thecurrentLineHeight method.

You must remember that annotations have a stacking order. If you are puttingmore than one annotation on a single area and one of those annotations is alink, make sure that the link is the last one you add, otherwise it will becovered by another annotation and the user won't be able to click it.

Here is an example that uses a few of the annotation types.

  1. # Add the link text
  2. doc.fontSize(25)
  3.    .fillColor('blue')
  4.    .text('This is a link!', 20, 0)
  6. # Measure the text
  7. width = doc.widthOfString('This is a link!')
  8. height = doc.currentLineHeight()   
  10. # Add the underline and link annotations
  11. doc.underline(20, 0, width, height, color: 'blue')
  12.    .link(20, 0, width, height, 'http://google.com/')
  14. # Create the highlighted text   
  15. doc.moveDown()
  16.    .fillColor('black')
  17.    .highlight(20, doc.y, doc.widthOfString('This text is highlighted!'), height)
  18.    .text('This text is highlighted!')
  20. # Create the crossed out text   
  21. doc.moveDown()
  22.    .strike(20, doc.y, doc.widthOfString('STRIKE!'), height)
  23.    .text('STRIKE!')

The output of this example looks like this.

Annotations - 图1

Annotations are currently not the easiest things to add to PDF documents, butthat is the fault of the PDF spec itself. Calculating a rectangle manually isn'tfun, but PDFKit makes it easier for a few common annotations applied to text, includinglinks, underlines, and strikes. Here's an example showing two of them:

  1. doc.fontSize 20
  2.    .fillColor 'red'
  3.    .text 'Another link!', 20, 0,
  4.      link: 'http://apple.com/',
  5.      underline: true

The output is as you'd expect:

Annotations - 图2

You made it!

That's all there is to creating PDF documents in PDFKit. It's really quitesimple to create beautiful multi-page printable documents using Node.js!

This guide was generated from Markdown/Literate CoffeeScript files using aPDFKit generation script. The examples are actually run to generate the output showninline. The script generates both the website and the PDF guide, andcan be found on Github.Check it out if you want to see an example of a slightly more complicated renderer usinga parser for Markdown and a syntax highlighter.

If you have any questions about what you've learned in this guide, please don'thesitate to ask the author or post an issueon Github. Enjoy!

Previous

原文: http://pdfkit.org/docs/annotations.html