mirror of
https://github.com/foliojs/pdfkit.git
synced 2026-01-25 16:06:44 +00:00
99 lines
6.5 KiB
HTML
99 lines
6.5 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Annotations in PDFKit</title><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Alegreya:700|Merriweather"><link rel="stylesheet" href="/docs/css/index.css"><link rel="stylesheet" href="/docs/css/github.css"></head><body><nav class="sidebar"><ul><li><a href="/">Home</a></li><li><a href="/docs/../index.html">Documentation</a><ul><li><a href="/docs/getting_started.html">Getting Started </a></li><li><a href="/docs/paper_sizes.html">Paper Sizes</a></li><li><a href="/docs/vector.html">Vector Graphics </a></li><li><a href="/docs/text.html">Text </a></li><li><a href="/docs/images.html">Images </a></li><li><a href="/docs/outline.html">Outlines </a></li><li><a class="selected" href="/docs/annotations.html">Annotations </a></li><li><a href="/docs/forms.html">Forms </a></li><li><a href="/docs/destinations.html">Destinations</a></li><li><a href="/docs/attachments.html">Attachments </a></li><li><a href="/docs/accessibility.html">Accessibility</a></li><li><a href="/docs/you_made_it.html">You made it!</a></li></ul></li><li><a href="/docs/guide.pdf">PDF Guide</a></li><li><a href="/examples/kitchen-sink.pdf">Example PDF</a></li><li><a href="/examples/browserify/browser.html">Interactive Browser Demo</a></li><li><a href="http://github.com/foliojs/pdfkit">Source Code</a></li></ul></nav><div class="main"><h1 id="annotations_in_pdfkit">Annotations in PDFKit</h1>
|
|
|
|
<p>Annotations are interactive features of the PDF format, and they make it
|
|
possible to include things like links and attached notes, or to highlight,
|
|
underline or strikeout portions of text. Annotations are added using the
|
|
various helper methods, and each type of annotation is defined by a rectangle
|
|
and some other properties. Here is a list of the available annotation methods:</p>
|
|
|
|
<ul><li><code>note(x, y, width, height, contents, options)</code></li><li><code>link(x, y, width, height, url, options)</code></li><li><code>goTo(x, y, w, h, name, options)</code></li><li><code>highlight(x, y, width, height, options)</code></li><li><code>underline(x, y, width, height, options)</code></li><li><code>strike(x, y, width, height, options)</code></li><li><code>lineAnnotation(x1, y1, x2, y2, options)</code></li><li><code>rectAnnotation(x, y, width, height, options)</code></li><li><code>ellipseAnnotation(x, y, width, height, options)</code></li><li><code>textAnnotation(x, y, width, height, text, options)</code></li><li><code>fileAnnotation(x, y, width, height, file, options)</code></li></ul>
|
|
|
|
<p>Many of the annotations have a <code>color</code> option that you can specify. You can
|
|
use an array of RGB values, a hex color, a named CSS color value, or a named
|
|
spot color value for that option.</p>
|
|
|
|
<p>A custom icon can be set using option <code>Name</code> property. Possible values are:
|
|
<code>'Comment'</code>, <code>'Key'</code>, <code>'Note'</code>, <code>'Help'</code>, <code>'NewParagraph'</code>, <code>'Paragraph'</code>
|
|
and <code>'Insert'</code>.</p>
|
|
|
|
<p>If you are adding an annotation to a piece of text, such as a link or
|
|
underline, you will need to know the width and height of the text in order to
|
|
create the required rectangle for the annotation. There are two methods that
|
|
you can use to do that. To get the width of any piece of text in the current
|
|
font, just call the <code>widthOfString</code> method with the string you want to
|
|
measure. To get the line height in the current font, just call the
|
|
<code>currentLineHeight</code> method.</p>
|
|
|
|
<p>You must remember that annotations have a stacking order. If you are putting
|
|
more than one annotation on a single area and one of those annotations is a
|
|
link, make sure that the link is the last one you add, otherwise it will be
|
|
covered by another annotation and the user won't be able to click it.</p>
|
|
|
|
<hr/>
|
|
|
|
<p>Here is an example that uses a few of the annotation types.</p>
|
|
|
|
<pre><code>// Add the link text
|
|
doc.fontSize(25)
|
|
.fillColor('blue')
|
|
.text('This is a link!', 20, 0);
|
|
|
|
// Measure the text
|
|
const width = doc.widthOfString('This is a link!');
|
|
const height = doc.currentLineHeight();
|
|
|
|
// Add the underline and link annotations
|
|
doc.underline(20, 0, width, height, {color: 'blue'})
|
|
.link(20, 0, width, height, 'http://google.com/');
|
|
|
|
// Create the highlighted text
|
|
doc.moveDown()
|
|
.fillColor('black')
|
|
.highlight(20, doc.y, doc.widthOfString('This text is highlighted!'), height)
|
|
.text('This text is highlighted!');
|
|
|
|
// Create text with a spot color
|
|
doc.addSpotColor('PANTONE185C', 0, 100, 78, 9)
|
|
doc.moveDown()
|
|
.fillColor('PANTONE185C')
|
|
.text('This text uses spot color!');
|
|
|
|
// Create the crossed out text
|
|
doc.moveDown()
|
|
.strike(20, doc.y, doc.widthOfString('STRIKE!'), height)
|
|
.text('STRIKE!');
|
|
|
|
// Create note
|
|
doc.note(10, 30, 30, 30, "Text of note");
|
|
|
|
// Create note with custom options
|
|
doc.note(10, 80, 30, 30, "Text of custom note", {Name: 'Key', color: 'red'});
|
|
|
|
// Adding go to as annotation
|
|
doc.goTo(20, doc.y, 10, 20, 'LINK', {});</code></pre>
|
|
|
|
<p>The output of this example looks like this.</p>
|
|
|
|
<p><img src="img/16.png"/></p>
|
|
|
|
<p>Annotations are currently not the easiest things to add to PDF documents, but
|
|
that is the fault of the PDF spec itself. Calculating a rectangle manually isn't
|
|
fun, but PDFKit makes it easier for a few common annotations applied to text, including
|
|
links, underlines, and strikes. Here's an example showing two of them:</p>
|
|
|
|
<pre><code>doc.fontSize(20)
|
|
.fillColor('red')
|
|
.text('Another link!', 20, 0, {
|
|
link: 'http://apple.com/',
|
|
underline: true
|
|
}
|
|
);</code></pre>
|
|
|
|
<p>The output is as you'd expect:</p>
|
|
|
|
<p><img src="img/17.png"/></p><nav><a class="previous" href="/docs/outline.html">Previous</a><a class="next" href="/docs/forms.html">Next</a></nav></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="/docs/js/scroll.js"></script><script src="/docs/js/highlight.pack.js"></script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-48340245-1', 'pdfkit.org');
|
|
ga('send', 'pageview');</script></body></html> |