Einleitung

Der einleitende Beitrag behandelt Anmerkungen kurz: Markierungen, Unterstreichungen, Haftnotizen und Stempel, die über Page.AddHighlight(), Page.AddUnderline() und ähnliche Methoden hinzugefügt werden. Das ist nur ein kleiner Ausschnitt dessen, was ein Page tatsächlich unterstützt — die Anmerkungs-Galerie in dieser Bibliothek umfasst Markup, Freihandformen, Links mit echter Navigation und Formularübermittlungsaktionen sowie die Suche, alles direkt erreichbar über Page.

Dieser Beitrag geht die restliche Oberfläche durch: die Methoden für Form- und Freihand-Anmerkungen, was die Aktion einer Link-Anmerkung tatsächlich bewirken kann und die beiden unterschiedlichen Möglichkeiten, Anmerkungsinhalte zu durchsuchen, abhängig davon, ob der gesuchte Text in der Darstellung der Anmerkung oder in ihrem /Contents-Kommentar vorkommt.

Jede Anmerkungsmethode gibt einen typisierten Handle zurück, der auf die gerade erstellte Anmerkung beschränkt ist, und jede Anmerkung auf einer Seite kann anschließend über page.Annotations ausgelesen werden.

Was enthalten ist

Markup-Anmerkungen

Page.AddHighlight(), Page.AddUnderline(), Page.AddSquiggly() und Page.AddStrikeOut() akzeptieren alle dieselbe Art von Optionen — ein Satz von Quad-Punkten, die den Textbereich markieren, und eine optionale Farbe — und alle vier geben ein MarkupAnnotation zurück. Die Quad-Punkte werden typischerweise aus einer Textsuche oder aus einem bekannten Textrechteck abgeleitet.

const markup = (body: [number, number, number, number], sample: string,
  add: (quads: number[]) => void): void => {
  const yMid = (body[1] + body[3]) / 2 - 6;
  const textRect: [number, number, number, number] = [body[0] + 4, yMid, body[2] - 4, yMid + 16];
  page.AddText(sample, textRect[0], textRect[1], { fontSize: 12 });
  add(rectToQuads(textRect));
};

markup(cardBody, 'Highlight this phrase', (quads) =>
  page.AddHighlight({ quads, color: [1, 1, 0], contents: 'Yellow highlight' }));
markup(cardBody, 'Underline this phrase', (quads) =>
  page.AddUnderline({ quads, color: [0, 0, 1] }));
markup(cardBody, 'Squiggle this phrase', (quads) =>
  page.AddSquiggly({ quads, color: [1, 0.5, 0] }));
markup(cardBody, 'Strike this phrase out', (quads) =>
  page.AddStrikeOut({ quads, color: [1, 0, 0] }));

Notizen und eigenständiger Text

Page.AddTextNote() fügt ein klassisches Klebezettel-Symbol hinzu, das beim Anklicken ein Kommentar-Popup öffnet und ein TextAnnotation zurückgibt. Page.AddFreeText() hingegen zeichnet seinen Text direkt auf die Seite innerhalb eines umrandeten Kastens, mit eigener Schriftgröße, Ausrichtung und Füllfarbe – nützlich für Hervorhebungen, die sichtbar sein sollen, ohne etwas zu öffnen.

page.AddTextNote({
  rect: [x, y, x + 20, y + 20], icon: 'Note', author: 'Reviewer',
  contents: 'This is a sticky-note annotation.',
});

page.AddFreeText({
  rect: [220, 60, 520, 96],
  contents: 'FreeText sample', fontSize: 10, align: 'center',
  fill: [1, 1, 0.8], width: 1,
});

Formen und Freihand-Tinte

Page.AddSquare() und Page.AddCircle() zeichnen ein umrandetes Rechteck oder eine Ellipse, jeweils mit optionaler Innenfüllung. Page.AddLine() zeichnet eine gerade Linie zwischen zwei Punkten, wobei an jedem Ende unabhängig wählbare Pfeilspitzen-Stile (startEnding/endEnding, z.B. 'OpenArrow'/'ClosedArrow') verwendet werden können. Page.AddPolygon() und Page.AddPolyline() erzeugen geschlossene bzw. offene Mehrpunkt-Formen aus einer flachen Koordinatenliste, und Page.AddInk() zeichnet ein oder mehrere Freihand-Stiftstriche als paths von Punktlisten auf.

page.AddSquare({ rect: [50, 400, 130, 435], color: [0.8, 0, 0], fill: [1, 1, 0.5], width: 2 });
page.AddCircle({ rect: [150, 400, 230, 435], color: [0, 0.5, 0], width: 2 });

page.AddLine({
  line: [260, 417, 420, 417],
  color: [0, 0, 0.7], width: 2,
  startEnding: 'OpenArrow', endEnding: 'ClosedArrow',
});

const stroke: number[] = [];
[-8, 6, -4, 10, -2, 8, -6].forEach((dy, i) => stroke.push(440 + i * 12, 417 + dy));
page.AddInk({ paths: [stroke], color: [0.6, 0, 0.6], width: 2 });

Page.AddLink() gibt ein LinkAnnotation zurück, dessen action bestimmt, was beim Klicken geschieht: { type: 'uri', uri: '...' } öffnet eine externe URL, { type: 'goto', page: N } springt zu einer Seite im selben Dokument, und { type: 'submit', url: '...', format: 'html' } übermittelt die aktuellen Formularfeld-Werte an einen Endpunkt. Eine außerhalb des Bereichs liegende goto Seitenzahl oder ein fehlerhaftes Aktions-Objekt wird bei der Erstellung abgelehnt, anstatt stillschweigend akzeptiert zu werden.

const uriLink = page.AddLink({
  rect: [10, 10, 100, 30], action: { type: 'uri', uri: 'https://example.com' },
});

const gotoLink = page.AddLink({
  rect: [10, 40, 100, 60], action: { type: 'goto', page: 2 },
});

const submitLink = page.AddLink({
  rect: [10, 70, 100, 90],
  action: { type: 'submit', url: 'https://example.com/post', format: 'html' },
});

// page.AddLink({ rect: [...], action: { type: 'goto', page: 99 } }) throws RangeError
// when 99 is out of range for the document.

Durchsuchen von Anmerkungsinhalten

Zwei verschiedene Methoden durchsuchen den Anmerkungstext, und sie sind bewusst disjunkt: Page.SearchAnnotations() durchsucht den Text des eigenen Erscheinungsbilds einer Anmerkung zieht — das sichtbare Etikett auf einer FreeText oder einem Stempel, zum Beispiel — während Page.SearchAnnotationText() durchsucht den Text, der in der Anmerkung enthalten ist /Contents Eintrag, wie zum Beispiel dem Kommentartext einer Haftnotiz. Ein Treffer in einem bedeutet nicht, dass es im anderen einen Treffer gibt.

page.SearchAnnotations('bravo');          // finds it if the annotation's drawn appearance contains it
page.SearchAnnotationText('bravo');       // finds it if the annotation's /Contents comment contains it

Nicht mehr benötigte Anmerkungen können direkt mit Page.RemoveAnnotation() entfernt werden, indem entweder der Anmerkungs-Handle oder das zugrunde liegende Wörterbuch übergeben wird.

Schnellstart

Installieren Sie das Paket und fügen Sie dann einer bestehenden Seite eine Hervorhebung, einen Link und eine Haftnotiz hinzu:

git clone https://github.com/aspose-pdf-foss/Aspose.PDF-FOSS-for-TypeScript.git
cd Aspose.PDF-FOSS-for-TypeScript
npm install
npm run build
import { Document } from '@asposefoss/pdf';

const doc = Document.OpenFile('input.pdf');
const page = doc.Pages[0];

page.AddHighlight({ quads: [72, 700, 300, 700, 72, 715, 300, 715], color: [1, 1, 0] });

page.AddLink({
  rect: [72, 670, 200, 690], action: { type: 'uri', uri: 'https://example.com' },
});

page.AddTextNote({
  rect: [320, 670, 340, 690], icon: 'Note', author: 'Reviewer',
  contents: 'Please double-check this figure.',
});

doc.WriteTo('annotated.pdf');

Unterstützte Formate

FormatErweiterungLesenSchreiben
PDFpdf✓✓
Markdownmd✓✓
SVGsvg✓✓
TIFFtiff✓✓
DOCXdocx—✓
HTMLhtml—✓
PNGpng—✓
EPUBepub—✓

Open Source & Lizenzierung

Aspose.PDF FOSS für TypeScript wird unter der MIT-Lizenz veröffentlicht, wobei der Quellcode auf GitHub veröffentlicht wird. Es gibt kein Evaluierungswasserzeichen, keine Nutzungslimits und keine separate Lizenzdatei zu verwalten, und die Bibliothek kann in kommerziellen Produkten ohne Lizenzgebühren verwendet werden.

Das Paket ist derzeit in Version 0.1.0, was die aktive Frühphasenentwicklung widerspiegelt. Node.js (>=22) ist die einzige Laufzeitvoraussetzung, und das Paket hat keine weiteren Drittanbieterabhängigkeiten.

Erste Schritte

Verwandte Ressourcen