บทนำ

โพสต์แนะนำเบื้องต้น กล่าวถึงการทำหมายเหตุโดยสรุป: ไฮไลท์, ขีดเส้นใต้, โน้ตติดกาว, และตรา ที่เพิ่มผ่าน Page.AddHighlight(), Page.AddUnderline(), และวิธีการคล้ายกัน นี่เป็นเพียงส่วนเล็ก ๆ ของสิ่งที่ Page รองรับจริง — แกลเลอรีหมายเหตุในไลบรารีนี้ครอบคลุมการทำ markup, รูปทรงวาดเส้นอิสระ, ลิงก์ที่มีการนำทางจริงและการส่งฟอร์ม, รวมถึงการค้นหา ทั้งหมดสามารถเข้าถึงได้โดยตรงจาก Page.

โพสต์นี้จะพาไปสำรวจส่วนที่เหลือของพื้นผิวนั้น: วิธีการทำหมายเหตุรูปทรงและวาดเส้นอิสระ, สิ่งที่การกระทำของหมายเหตุ Link สามารถทำได้จริง, และสองวิธีต่างกันในการค้นหาเนื้อหาของหมายเหตุ ขึ้นอยู่กับว่าข้อความที่คุณกำลังมองหาอยู่ในลักษณะการแสดงผลของหมายเหตุหรือในคอมเมนต์ /Contents ของมัน.

แต่ละวิธีการทำหมายเหตุจะคืนค่าสัญญาณตัวจัดการที่มีประเภทซึ่งจำกัดขอบเขตให้กับหมายเหตุที่เพิ่งสร้างขึ้น, และหมายเหตุทุกอันบนหน้า สามารถอ่านได้ภายหลังผ่าน page.Annotations.


สิ่งที่รวมอยู่

หมายเหตุ Markup

Page.AddHighlight(), Page.AddUnderline(), Page.AddSquiggly(), และ Page.AddStrikeOut() ใช้รูปแบบตัวเลือกเดียวกัน — ชุดจุดสี่เหลี่ยมที่ระบุบริเวณข้อความและสีที่เป็นตัวเลือก — และสี่ตัวนี้ทั้งหมดจะคืนค่า MarkupAnnotation จุดสี่เหลี่ยมมักจะได้มาจากการค้นหาข้อความหรือจากสี่เหลี่ยมข้อความที่ทราบ.

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

บันทึกและข้อความอิสระ

Page.AddTextNote() เพิ่มไอคอนโน้ตแบบแปะคลาสสิกที่เปิดป๊อปอัพคอมเมนต์เมื่อคลิก, คืนค่า TextAnnotation. Page.AddFreeText() แทนที่จะวาดข้อความโดยตรงบนหน้าในกล่องที่มีกรอบ, พร้อมขนาดฟอนต์, การจัดแนว, และสีเติมของมันเอง — มีประโยชน์สำหรับการเรียกอ้างที่ควรเห็นได้โดยไม่ต้องเปิดอะไรเลย.

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

รูปทรงและหมึกวาดมืออิสระ

Page.AddSquare() และ Page.AddCircle() วาดสี่เหลี่ยมผืนผ้าหรือวงรีที่มีกรอบ, แต่ละรูปมีการเติมสีภายในแบบเลือกได้. Page.AddLine() วาดเส้นตรงระหว่างสองจุด, พร้อมสไตล์หัวศรที่เลือกได้อย่างอิสระ (startEnding/endEnding, เช่น 'OpenArrow'/'ClosedArrow') ที่แต่ละด้าน. Page.AddPolygon() และ Page.AddPolyline() วาดรูปหลายจุดแบบปิดและเปิดจากรายการพิกัดแบบแบน, และ Page.AddInk() บันทึกเส้นปากกาวาดมือหนึ่งหรือหลายเส้นเป็น paths ของรายการจุด.

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() คืนค่า LinkAnnotation ที่ action ของมันกำหนดว่าจะเกิดอะไรขึ้นเมื่อคลิก: { type: 'uri', uri: '...' } เปิด URL ภายนอก, { type: 'goto', page: N } กระโดดไปยังหน้าภายในเอกสารเดียวกัน, และ { type: 'submit', url: '...', format: 'html' } ส่งค่าฟิลด์ฟอร์มปัจจุบันไปยัง endpoint. หมายเลขหน้า goto ที่อยู่นอกช่วงหรืออ็อบเจ็กต์การกระทำที่รูปแบบไม่ถูกต้องจะถูกปฏิเสธในขณะสร้างแทนที่จะรับโดยเงียบ.

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.

การค้นหาเนื้อหาคำอธิบายประกอบ

มีสองวิธีที่แตกต่างกันในการค้นหาข้อความคำอธิบาย และพวกมันถูกออกแบบให้แยกจากกันโดยเจตนา: Page.SearchAnnotations() ค้นหาข้อความจากการปรากฏของคำอธิบายเอง ดึง — ป้ายที่มองเห็นได้บน FreeText หรือแสตมป์, ตัวอย่างเช่น — ในขณะที่ Page.SearchAnnotationText() ค้นหาข้อความที่บรรจุอยู่ในคำอธิบายของ /Contents รายการ, เช่น เนื้อหาความคิดเห็นของโน้ตติดกาว. การจับคู่ในหนึ่งไม่หมายความว่าจะจับคู่ในอีกอัน.

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

หมายเหตุที่ไม่จำเป็นอีกต่อไปสามารถลบได้โดยตรงด้วย Page.RemoveAnnotation(), โดยส่งผ่านทั้งตัวจัดการหมายเหตุหรือพจนานุกรมพื้นฐานของมัน.


เริ่มต้นอย่างรวดเร็ว

ติดตั้งแพคเกจ, จากนั้นเพิ่มไฮไลท์, ลิงก์, และโน้ตแบบสติ๊กกี้ไปยังหน้าที่มีอยู่:

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

รูปแบบที่รองรับ

รูปแบบนามสกุลอ่านเขียน
PDFpdf✓✓
Markdownmd✓✓
SVGsvg✓✓
TIFFtiff✓✓
DOCXdocx—✓
HTMLhtml—✓
PNGpng—✓
EPUBepub—✓

โอเพนซอร์ส & การให้สิทธิ์ใช้งาน

Aspose.PDF FOSS สำหรับ TypeScript ถูกเผยแพร่ภายใต้สัญญาอนุญาต MIT, โดยซอร์สโค้ดถูกตีพิมพ์บน GitHub. ไม่มีลายน้ำการประเมิน, ขีดจำกัดการใช้งาน, หรือไฟล์สัญญาอนุญาตแยกต่างหากที่ต้องจัดการ, และไลบรารีนี้สามารถใช้ในผลิตภัณฑ์เชิงพาณิชย์ได้โดยไม่มีค่าลิขสิทธิ์.

แพคเกจในขณะนี้อยู่ที่เวอร์ชัน 0.1.0, สะท้อนการพัฒนาในระยะเริ่มต้นที่กำลังดำเนินอยู่. Node.js (>=22) เป็นข้อกำหนดรันไทม์เดียวที่ต้องการ, และแพคเกจไม่มีการพึ่งพาจากบุคคลที่สามอื่นใด.


เริ่มต้น

แหล่งข้อมูลที่เกี่ยวข้อง