วิธีทำงานกับ Annotations ใน TypeScript

วิธีทำงานกับ Annotations ใน TypeScript

คู่มือนี้แสดงวิธีการเพิ่ม, ทำให้แบนลง, และค้นหาคำอธิบายประกอบ PDF ด้วย Aspose.PDF FOSS สำหรับ TypeScript. คลาส Page เปิดเผยวิธีการ Add* หนึ่งรายการต่อแต่ละประเภทของคำอธิบายประกอบ — การทำเครื่องหมาย (ไฮไลท์, ขีดเส้นใต้, ขีดฆ่า, เส้นโค้งหยัก), รูปร่าง (สี่เหลี่ยม, วงกลม, เส้น, โพลิกอน, หมึก), ข้อความ (โน้ตติด, ข้อความอิสระ), และลิงก์ — แต่ละวิธีจะคืนค่าตัวจัดการ Annotation ที่มีประเภทเฉพาะ ซึ่งสามารถอ่านกลับหรือทำให้แบนลงในภายหลัง. จำเป็นต้องใช้ Node.js 22 หรือใหม่กว่า.

คู่มือแบบเป็นขั้นตอน

ขั้นตอนที่ 1: ติดตั้งแพ็คเกจ

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

ตรวจสอบการติดตั้งโดยการนำเข้าคลาส Document ในไฟล์ TypeScript ใหม่ — บรรทัดนี้ควรทำงานโดยไม่มีข้อผิดพลาดเมื่อแพ็คเกจถูกติดตั้งเรียบร้อยแล้ว:

import { Document } from '@asposefoss/pdf';

ขั้นตอนที่ 2: นำเข้าคลาสที่จำเป็น

นำเข้า Document เพื่อเปิดไฟล์และ Page สำหรับลายเซ็นประเภทคำอธิบายที่ใช้ในขั้นตอนด้านล่าง:

import { Document, Page } from '@asposefoss/pdf';

ขั้นตอนที่ 3: เพิ่มคำอธิบายมาร์คอัป

Page.AddHighlight(), Page.AddUnderline(), Page.AddSquiggly() และ Page.AddStrikeOut() ทั้งหมดรับอาร์เรย์ quads — หนึ่งชุดตัวเลข 8 ตัว (x1,y1,x2,y2,x3,y3,x4,y4) ต่อแต่ละส่วนข้อความที่ไฮไลต์ — พร้อมกับ color และ contents ที่เป็นตัวเลือกเพิ่มเติม. ไลบรารีจะสร้างสตรีมการแสดงผล (/AP) สำหรับสับไทป์ทั้งสี่โดยอัตโนมัติ:

import { Document } from '@asposefoss/pdf';

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

page.AddHighlight({
  quads: [72, 700, 300, 700, 72, 685, 300, 685],
  color: [1, 1, 0],
  contents: 'Yellow highlight',
});
page.AddUnderline({
  quads: [72, 660, 300, 660, 72, 645, 300, 645],
  color: [0, 0, 1],
});
page.AddStrikeOut({
  quads: [72, 620, 300, 620, 72, 605, 300, 605],
  color: [1, 0, 0],
});

doc.WriteTo('annotated.pdf');

ขั้นตอนที่ 4: เพิ่มคำอธิบายรูปร่างและหมึก

Page.AddSquare() และ Page.AddCircle() รับ rect ที่จำกัดขอบพร้อมกับ color (เส้น) และ fill ที่เป็นตัวเลือกเพิ่มเติม. Page.AddLine() รับ line จำนวน 4 ตัว (x1,y1,x2,y2) และปลายลูกศรที่เป็นตัวเลือก. Page.AddInk() รับ paths — อาร์เรย์ของอาร์เรย์คู่จุดแบน, หนึ่งชุดต่อแต่ละเส้นปากกา:

page.AddSquare({ rect: [100, 500, 220, 560], color: [0.8, 0, 0], fill: [1, 1, 0.5], width: 2 });
page.AddCircle({ rect: [250, 500, 370, 560], color: [0, 0.5, 0], width: 2 });
page.AddLine({
  line: [100, 470, 370, 470],
  color: [0, 0, 0.7],
  width: 2,
  startEnding: 'OpenArrow',
  endEnding: 'ClosedArrow',
});
page.AddInk({
  paths: [[100, 400, 130, 430, 160, 390, 190, 420]],
  color: [0.6, 0, 0.6],
  width: 2,
});

ขั้นตอนที่ 5: เพิ่มโน้ตเหนียวและข้อความอิสระ

Page.AddTextNote() วางไอคอนที่คลิกได้ซึ่งเปิดป๊อปอัปความคิดเห็น. Page.AddFreeText() วาดข้อความโดยตรงบนหน้าใน rect ของมัน:

page.AddTextNote({
  rect: [400, 700, 420, 720],
  icon: 'Note',
  author: 'Reviewer',
  contents: 'This is a sticky-note annotation.',
});

page.AddFreeText({
  rect: [400, 600, 550, 660],
  contents: 'FreeText sample',
  fontSize: 10,
  align: 'center',
  fill: [1, 1, 0.8],
  width: 1,
});

ขั้นตอนที่ 6: ทำให้คำอธิบายแบนเป็นเนื้อหาคงที่

แต่ละตัวจัดการคำอธิบายที่คืนค่ามาจากการเรียก Add* จะมีเมธอด Flatten() ที่ฝังลักษณะการแสดงของคำอธิบายลงในสตรีมเนื้อหาของหน้าและลบออกจาก /Annots หลังจากทำการแบนเฟลท์แล้ว จะไม่มีสิ่งใดเหลือให้คลิกหรือแก้ไขในโปรแกรมดูอีกต่อไป:

const note = page.AddFreeText({
  rect: [210, 535, 470, 590],
  contents: 'Sticky note — flattened into the page.',
  fontSize: 11,
  align: 'left',
});

note.Flatten(); // -> boolean; bakes the annotation, unwires itself from /Annots

ขั้นตอนที่ 7: ค้นหาข้อความคำอธิบาย

Page.SearchAnnotationText() and Page.SearchAnnotations() ไม่ทับซ้อนกันในทั้งสองทิศทาง: SearchAnnotationText() ตรงกับเมตาดาต้าอนโนเทชั่นตามตัวอักษร (/Contents, /T, /Subj), ในขณะที่ SearchAnnotations() ตรงกับ rendered ข้อความของอนโนเทชั่นการทำเครื่องหมายเช่น FreeText:

const metadataHits = page.SearchAnnotationText('confidential');
for (const hit of metadataHits) {
  console.log(hit.key, hit.value); // e.g. 'Contents', 'confidential'
}

const renderedHits = page.SearchAnnotations('confidential');
console.log(renderedHits.length);

ปัญหาที่พบบ่อยและวิธีแก้ไข

Page.AddHighlight() (หรือวิธีการทำเครื่องหมายอื่น) วาดในตำแหน่งที่ผิด. quads เป็นอาเรย์แบน 8 ตัวเลข (x1,y1,x2,y2,x3,y3,x4,y4), ไม่ใช่ rect — การส่งสี่เหลี่ยมที่มีตัวเลข 4 ตัวทำให้ได้ควอดที่ผิดรูปหรือหายไป สร้างควอดหนึ่งตัวต่อบรรทัดของข้อความที่ไฮไลท์.

หมายเหตุที่แบนแล้วยังคงคลิกได้. Flatten() ต้องเรียกบนอ็อบเจ็กต์ที่ส่งกลับมาจาก the Add* การเรียก, และเอกสารต้องถูกบันทึก (doc.WriteTo() / doc.Save()) หลังจากทำให้แบน — การเปลี่ยนแปลงจะอยู่ในหน่วยความจำจนกว่าไฟล์จะถูกเขียนกลับออกไป.

SearchAnnotationText() คืนค่าไม่มีผลลัพธ์แม้ว่าข้อความจะมองเห็นได้บนหน้า. มันจะค้นหาเฉพาะฟิลด์เมตาดาต้าของหมายเหตุ (/Contents, /T, /Subj) — ข้อความมาร์กอัปที่มองเห็นได้ซึ่งแสดงจากลักษณะของหมายเหตุเอง (เช่น a FreeText body) ถูกพบโดย SearchAnnotations() แทน และไม่ค้นหาเนื้อหาหน้าทั่วไป (ใช้ Page.GetText() or Page.Search() สำหรับสิ่งนั้น).

Redaction marks ไม่ปรากฏเมื่อค้นหาคำอธิบายประกอบ. Page.AddRedact() สร้าง RedactAnnotation, ชนิดย่อยที่แตกต่างจากคำอธิบาย markup/shape/text ที่ครอบคลุมที่นี่ — ดู Redaction คู่มือ.

คำถามที่พบบ่อย

ระบบ Page รองรับชนิดย่อยของคำอธิบายประกอบกี่ประเภท?

ไลบรารีสร้างลักษณะการแสดงผลสำหรับ markup (highlight, underline, strikeout, squiggly), shapes (square, circle, line, polygon, ink), text (sticky note, free text), links, และ stamps — รวมถึงคำอธิบายประกอบการแนบไฟล์และการทำลายข้อมูล ซึ่งอธิบายไว้ในคู่มือวิธีใช้ของแต่ละประเภท.

ฉันสามารถอ่านคำอธิบายประกอบที่มีอยู่แล้วบนหน้าได้หรือไม่?

ใช่ — Page.Annotations ส่งคืนคำอธิบายประกอบที่มีอยู่เป็นอาเรย์ของแฮนด์เดิลที่ระบุประเภทซึ่งคุณสามารถตรวจสอบ, แก้ไข, หรือทำให้แบนได้, และ Page.RemoveAnnotation(a) จะลบหนึ่งรายการ.

ความแตกต่างระหว่างการทำให้คำอธิบายประกอบแบนและการใช้การทำลายข้อมูลคืออะไร?

Flatten() บันทึกคำอธิบายประกอบ appearance เข้าไปในหน้าและลบอ็อบเจ็กต์คำอธิบาย แต่ข้อความหรือรูปภาพใด ๆ ที่อยู่ใต้มันจะไม่ได้รับการแก้ไข. ApplyRedactions() เขียนทับสตรีมเนื้อหาอย่างทำลายเพื่อให้เนื้อหาที่ถูกครอบคลุมหายไป — ดูคู่มือการลบข้อมูลสำหรับรายละเอียด.

การทำ annotation จะถูกเก็บรักษาไว้ผ่านการบันทึก/เปิดไฟล์ซ้ำหรือไม่?

ใช่ — การทำ annotation ที่เพิ่มก่อน doc.WriteTo() / doc.Save() จะถูกเขียนลงใน PDF และอ่านคืนอย่างถูกต้องในการ Document.Open() / Document.OpenFile() ถัดไป.

ดูเพิ่มเติม

 ภาษาไทย