Inleiding

De introductiepost behandelt annotaties kort: markeringen, onderstrepingen, plaknotities en stempels, toegevoegd via Page.AddHighlight(), Page.AddUnderline() en soortgelijke methoden. Dat is een klein deel van wat een Page daadwerkelijk ondersteunt — de annotatiegalerij in deze bibliotheek omvat markup, freehand shapes, links met echte navigation en form-submission acties, en zoeken, alles direct bereikbaar vanuit Page.

Deze post behandelt de rest van dat oppervlak: de vorm- en freehand-annotatiemethoden, wat een Link annotatie-actie daadwerkelijk kan doen, en de twee verschillende manieren om annotatie-inhoud te doorzoeken, afhankelijk van of de tekst die je zoekt zich bevindt in de weergave van de annotatie of in de /Contents-opmerking.

Elke annotatiemethode geeft een getypeerde handle terug die is gescopeerd op de annotatie die zojuist is gecreëerd, en elke annotatie op een pagina is daarna leesbaar via page.Annotations.

Wat inbegrepen is

Markup-annotaties

Page.AddHighlight(), Page.AddUnderline(), Page.AddSquiggly() en Page.AddStrikeOut() gebruiken allemaal dezelfde vorm van opties — een set quad-punten die het tekstreeksen markeren en een optionele kleur — en alle vier retourneren een MarkupAnnotation. De quad-punten worden doorgaans afgeleid van een tekstzoekopdracht of van een bekende tekstrechthoek.

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] }));

Notities en Vrijstaande Tekst

Page.AddTextNote() voegt een klassiek plaknotitie-icoon toe dat bij klikken een opmerking-popup opent en een TextAnnotation retourneert. Page.AddFreeText() tekent in plaats daarvan de tekst rechtstreeks op de pagina binnen een omkaderde doos, met eigen lettergrootte, uitlijning en vulkleur — handig voor oproepen die zichtbaar moeten zijn zonder iets te openen.

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,
});

Vormen en Vrije Hand Inkt

Page.AddSquare() en Page.AddCircle() tekenen een omkaderde rechthoek of ellips, elk met een optionele binnenvulling. Page.AddLine() tekent een rechte lijn tussen twee punten, met onafhankelijk selecteerbare pijlpuntstijlen (startEnding/endEnding, bijv. 'OpenArrow'/'ClosedArrow') aan elk uiteinde. Page.AddPolygon() en Page.AddPolyline() tekenen gesloten en open meerpuntige vormen vanuit een platte lijst van coördinaten, en Page.AddInk() registreert een of meer vrije-hand pennenstreken als paths van puntlijsten.

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 });

Koppelingen en hun Acties

Page.AddLink() retourneert een LinkAnnotation waarvan de action bepaalt wat er gebeurt bij klikken: { type: 'uri', uri: '...' } opent een externe URL, { type: 'goto', page: N } springt naar een pagina binnen hetzelfde document, en { type: 'submit', url: '...', format: 'html' } verzendt de huidige formulier-veldwaarden naar een eindpunt. Een buiten het bereik liggend goto paginanummer of een misvormd actiekader wordt bij het aanmaken afgewezen in plaats van stilletjes geaccepteerd.

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.

Zoeken in Annotatie-Inhoud

Twee verschillende methoden doorzoeken de annotatietekst, en ze zijn opzettelijk niet overlappend: Page.SearchAnnotations() doorzoekt de tekst van de eigen weergave van een annotatie tekent — het zichtbare label op een FreeText of stempel, bijvoorbeeld — terwijl Page.SearchAnnotationText() doorzoekt de tekst die in de annotatie is opgeslagen /Contents vermelding, zoals het commentaargedeelte van een plaknotitie. Een overeenkomst in de ene impliceert niet dat er een overeenkomst is in de andere.

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

Annotaties die niet langer nodig zijn, kunnen direct worden verwijderd met Page.RemoveAnnotation(), waarbij je ofwel de annotatie-handle of het onderliggende woordenboek doorgeeft.

Snelstart

Installeer het pakket en voeg vervolgens een markering, een link en een plaknotitie toe aan een bestaande pagina:

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');

Ondersteunde formaten

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

Open source & licensering

Aspose.PDF FOSS voor TypeScript wordt uitgebracht onder de MIT-licentie, met de broncode gepubliceerd op GitHub. Er is geen evaluatiewatermerk, gebruikslimiet of apart licentiebestand om te beheren, en de bibliotheek mag in commerciële producten worden gebruikt zonder royalty’s.

Het pakket bevindt zich momenteel op versie 0.1.0, wat een actieve vroege ontwikkelingsfase weerspiegelt. Node.js (>=22) is de enige runtime-vereiste, en het pakket heeft geen andere externe afhankelijkheden.

Aan de slag

Gerelateerde bronnen