วิธีทำงานกับฟิลด์ AcroForm ใน TypeScript
คู่มือนี้แสดงวิธีเพิ่มและทำให้แบนฟิลด์ AcroForm ด้วย Aspose.PDF FOSS สำหรับ TypeScript. Document.Form เปิดเผยหนึ่งวิธี Add* ต่อประเภทฟิลด์ — text, checkbox, radio group, combo box, list box, และ push button — แต่ละอันจะคืนค่าตัวจัดการฟิลด์ที่มีประเภทกำหนด. จำเป็นต้องใช้ 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 เพื่อเปิดไฟล์และไปถึง doc.Form ซึ่งเป็นจุดเริ่มต้นสำหรับทุกเมธอดฟิลด์ที่ใช้ด้านล่าง:
import { Document } from '@asposefoss/pdf';ขั้นตอนที่ 3: เพิ่มฟิลด์ข้อความและช่องทำเครื่องหมาย
Form.AddTextField(init) และ Form.AddCheckbox(init) ทั้งสองรับจำนวน page, rect, name ที่เป็นเอกลักษณ์, และตัวเลือกการจัดรูปแบบ:
const doc = Document.OpenFile('form-template.pdf');
const form = doc.Form;
const pageNum = doc.Pages[0].Number;
form.AddTextField({
page: pageNum, rect: [200, 670, 450, 690], name: 'FullName', value: 'Alice Sample',
borderColor: [0.1, 0.15, 0.4], font: 'Helvetica', fontSize: 12,
});
form.AddCheckbox({
page: pageNum, rect: [200, 630, 218, 648], name: 'Subscribe',
checked: true, borderColor: [0.1, 0.15, 0.4],
});ขั้นตอนที่ 4: เพิ่มกลุ่มปุ่มวิทยุ, คอมโบบ็อกซ์, และกล่องรายการ
Form.AddRadioGroup(init) รับค่า name เดียวที่ใช้ร่วมกันโดยทุกตัวเลือกในอาเรย์ options ของมัน, แต่ละตัวมีค่า rect และ export ของตนเอง. Form.AddComboBox(init) และ Form.AddListBox(init) รับอาเรย์ options ของคู่ { export, display }; กล่องรายการยังสนับสนุน multiSelect:
form.AddRadioGroup({
name: 'Plan', selected: 'Pro',
options: [
{ page: pageNum, rect: [200, 590, 218, 608], export: 'Basic' },
{ page: pageNum, rect: [290, 590, 308, 608], export: 'Pro' },
],
});
form.AddComboBox({
page: pageNum, rect: [200, 550, 350, 570], name: 'Country', value: 'US',
options: [
{ export: 'US', display: 'United States' },
{ export: 'UK', display: 'United Kingdom' },
],
});
form.AddListBox({
page: pageNum, rect: [200, 410, 350, 510], name: 'Interests',
multiSelect: true, value: ['pdf'],
options: [
{ export: 'pdf', display: 'PDF Engineering' },
{ export: 'crypto', display: 'Cryptography' },
],
});ขั้นตอนที่ 5: เพิ่มปุ่มกด
Form.AddPushButton(init) รับค่า caption และ action ที่อธิบายว่าปุ่มทำอะไรเมื่อคลิก — ตัวอย่างเช่น การส่งข้อมูลฟอร์มไปยัง URL:
form.AddPushButton({
page: pageNum, rect: [200, 320, 320, 388], name: 'Submit',
caption: 'Submit',
action: { type: 'submit', url: 'https://example.com/submit', format: 'fdf' },
});ขั้นตอนที่ 6: ทำให้ฟิลด์ฟอร์มแบน
ตัวจัดการฟิลด์แต่ละตัวที่ส่งกลับจากการเรียก Add* จะมีเมธอด Flatten() ที่ฝังค่าปัจจุบันของมันลงในสตรีมเนื้อหาของหน้าและลบออกจาก AcroForm แบบโต้ตอบ:
const tb = form.AddTextField({
page: pageNum, rect: [210, 660, 460, 680], name: 'FlattenName', value: 'Alice Sample',
});
tb.Flatten(); // -> number; bakes the value, unwires the field from /AcroForm
doc.WriteTo('flattened.pdf');ปัญหาทั่วไปและการแก้ไข
ฟิลด์ไม่ปรากฏบนหน้าที่ตั้งใจไว้. page ในฟิลด์ของ init อ็อบเจ็กต์คือหมายเลขหน้าของหน้านั้นเอง ไม่ใช่ดัชนีของอาร์เรย์ — ยืนยันกับ page.Number บนเป้าหมาย Page.
ตัวเลือกปุ่มวิทยุไม่เป็นเอกสิทธิ์ต่อกัน. ทุกตัวเลือกใน Form.AddRadioGroup()ของ options อาร์เรย์ต้องแชร์ค่าเดียวของกลุ่ม name — การผสมชื่อฟิลด์ทำให้สร้างกล่องกาเครื่องหมายอิสระแทนกลุ่มปุ่มวิทยุ.
ค่าของฟิลด์ที่ทำให้แบนไม่ปรากฏในไฟล์ที่บันทึกไว้. บันทึกเอกสาร (doc.WriteTo() / doc.Save()) หลังจากเรียกใช้ Flatten() — การเปลี่ยนแปลงจะมีอยู่ในหน่วยความจำเท่านั้นจนกว่าไฟล์จะถูกเขียนกลับออกไป.
คอมโบบ็อกซ์แสดงค่าการส่งออกแทนข้อความที่แสดงผล. การแสดงผลวาด display; ค่าที่เก็บของฟิลด์ (/V) คือ export — ยืนยันว่าทั้งสองตั้งค่าสำหรับทุกตัวเลือก ไม่ใช่แค่หนึ่ง.
คำถามที่พบบ่อย
ฉันสามารถอ่านค่าปัจจุบันของฟิลด์ได้หลังจากฟอร์มถูกกรอกหรือไม่?
ใช่ — อ่านคุณสมบัติ Value ของตัวจัดการฟิลด์, หรือวนซ้ำ doc.Form.Fields เพื่อตรวจสอบทุกฟิลด์บนเอกสาร.
ความแตกต่างระหว่าง Flatten() บนฟิลด์และบน annotation คืออะไร?
ทั้งฝังเนื้อหาเชิงโต้ตอบลงในเนื้อหาหน้าสถิตและลบออกจากคอลเลกชันที่สอดคล้องของมัน — ของฟิลด์ Flatten() ลบออกจาก /AcroForm, ในขณะที่ของคำอธิบาย Flatten() (อธิบายใน คำอธิบาย guide) ลบออกจากของหน้า /Annots.
กล่องรายการ (list box) สามารถเลือกหลายรายการได้หรือไม่?
ใช่ — ตั้งค่า multiSelect: true บนวัตถุ init ของ Form.AddListBox() และส่งอาเรย์ไปยัง value.
ปุ่ม push button จำเป็นต้องมีการกระทำจึงจะมีประโยชน์หรือไม่?
action (เช่น { type: 'submit', url, format }) คือสิ่งที่ทำให้ปุ่มทำงานเมื่อคลิก; หากไม่มีมัน ปุ่มจะถูกแสดงแต่ไม่มีพฤติกรรมใดเชื่อมต่อ.