Pendahuluan

Posting introductory post mencakup anotasi secara singkat: sorotan, garis bawah, catatan tempel, dan cap, ditambahkan melalui Page.AddHighlight(), Page.AddUnderline(), dan metode serupa. Itu hanya sebagian kecil dari apa yang sebenarnya didukung oleh Page — galeri anotasi dalam perpustakaan ini mencakup markup, bentuk bebas, tautan dengan navigasi nyata dan aksi pengiriman formulir, serta pencarian, semuanya dapat diakses langsung dari Page.

Posting ini membahas sisa permukaan itu: metode anotasi bentuk dan bebas, apa yang sebenarnya dapat dilakukan oleh aksi anotasi Link, serta dua cara berbeda untuk mencari konten anotasi tergantung apakah teks yang Anda cari berada dalam tampilan anotasi atau komentar /Contents.

Setiap metode anotasi mengembalikan handle bertipe yang terikat pada anotasi yang baru saja dibuat, dan setiap anotasi pada halaman dapat dibaca kemudian melalui page.Annotations.

Apa yang Disertakan

Anotasi Markup

Page.AddHighlight(), Page.AddUnderline(), Page.AddSquiggly(), dan Page.AddStrikeOut() semuanya menerima bentuk opsi yang sama — sekumpulan titik kuadran yang menandai wilayah teks dan warna opsional — dan keempatnya mengembalikan sebuah MarkupAnnotation. Titik kuadran biasanya diperoleh dari pencarian teks atau dari persegi panjang teks yang diketahui.

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

Catatan dan Teks Bebas

Page.AddTextNote() menambahkan ikon catatan tempel klasik yang membuka popup komentar saat diklik, mengembalikan TextAnnotation. Page.AddFreeText() sebaliknya menggambar teksnya langsung di halaman dalam kotak berbingkai, dengan ukuran font, perataan, dan warna isi sendiri — berguna untuk panggilan yang harus terlihat tanpa membuka apa pun.

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

Bentuk dan Tinta Bebas

Page.AddSquare() dan Page.AddCircle() menggambar persegi panjang atau elips berbingkai, masing-masing dengan isian interior opsional. Page.AddLine() menggambar garis lurus antara dua titik, dengan gaya kepala panah yang dapat dipilih secara independen (startEnding/endEnding, misalnya 'OpenArrow'/'ClosedArrow') di setiap ujung. Page.AddPolygon() dan Page.AddPolyline() menggambar bentuk multi-titik tertutup dan terbuka dari daftar koordinat datar, dan Page.AddInk() merekam satu atau lebih goresan pena bebas sebagai paths dari daftar titik.

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

Tautan dan Aksinya

Page.AddLink() mengembalikan LinkAnnotation yang action menentukan apa yang terjadi saat diklik: { type: 'uri', uri: '...' } membuka URL eksternal, { type: 'goto', page: N } melompat ke halaman dalam dokumen yang sama, dan { type: 'submit', url: '...', format: 'html' } mengirim nilai bidang formulir saat ini ke endpoint. Nomor halaman goto di luar jangkauan atau objek aksi yang tidak terbentuk dengan benar ditolak pada saat pembuatan alih-alih diterima secara diam-diam.

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.

Mencari Konten Anotasi

Dua metode berbeda mencari teks anotasi, dan keduanya sengaja terpisah: Page.SearchAnnotations() mencari teks pada tampilan anotasi itu sendiri menarik — label yang terlihat pada sebuah FreeText atau cap, misalnya — sementara Page.SearchAnnotationText() mencari teks yang dibawa dalam anotasi /Contents entri, seperti isi komentar catatan tempel. Kecocokan pada satu tidak berarti ada kecocokan pada yang lain.

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

Anotasi yang tidak lagi dibutuhkan dapat dihapus langsung dengan Page.RemoveAnnotation(), dengan memberikan handle anotasi atau kamus dasarnya.

Memulai Cepat

Pasang paket, lalu tambahkan sorotan, tautan, dan catatan tempel ke halaman yang ada:

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

Format yang Didukung

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

Sumber Terbuka & Lisensi

Aspose.PDF FOSS untuk TypeScript dirilis di bawah lisensi MIT, dengan sumber dipublikasikan di GitHub. Tidak ada watermark evaluasi, batas penggunaan, atau file lisensi terpisah yang harus dikelola, dan perpustakaan dapat digunakan dalam produk komersial tanpa royalti.

Paket saat ini berada pada versi 0.1.0, mencerminkan pengembangan tahap awal yang aktif. Node.js (>=22) adalah satu-satunya persyaratan runtime, dan paket tidak memiliki ketergantungan pihak ketiga lainnya.

Memulai

Sumber Daya Terkait