TypeScript에서 AcroForm 필드 작업하는 방법

TypeScript에서 AcroForm 필드 작업하는 방법

이 가이드는 TypeScript를 위해 Aspose.PDF FOSS와 함께 AcroForm 필드를 추가하고 평탄화하는 방법을 보여줍니다. Document.Form은 필드 유형당 하나의 Add* 메서드를 제공하며 — 텍스트, 체크박스, 라디오 그룹, 콤보 박스, 리스트 박스, 푸시 버튼 — 각각은 타입이 지정된 필드 핸들을 반환합니다. 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

패키지가 설치된 후 오류 없이 해결되는지 확인하려면 새 TypeScript 파일에 Document 클래스를 가져오세요 — 이 줄은 오류 없이 해결되어야 합니다:

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

2단계: 필요한 클래스 가져오기

Import 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)은(는) options 배열의 모든 옵션이 공유하는 단일 name을(를) 사용하며, 각 옵션은 자체 rect 및 export 값을 가집니다. Form.AddComboBox(init)와 Form.AddListBox(init)은 { export, display } 쌍의 options 배열을 사용합니다; 리스트 박스는 추가로 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()’s options 배열은 그룹의 단일을 공유해야 합니다. name — 필드 이름을 혼합하면 라디오 그룹 대신 독립적인 체크박스가 생성됩니다.

평탄화된 필드의 값이 저장된 파일에 나타나지 않습니다. 문서를 저장하십시오 (doc.WriteTo() / doc.Save()) 호출 후 Flatten() — 파일이 다시 저장될 때까지 변경 사항은 메모리에만 존재합니다.

콤보 박스가 표시 텍스트 대신 내보내기 값을 표시합니다. 외관이 그려집니다 display; 필드의 저장된 값 (/V)은 export — 모든 옵션에 대해 두 개가 모두 설정되어 있는지 확인하십시오, 하나만이 아니라.

자주 묻는 질문

양식이 채워진 후에 필드의 현재 값을 읽을 수 있나요?

예 — 필드 핸들의 Value 속성을 읽거나, doc.Form.Fields을 반복하여 문서의 모든 필드를 검사하십시오.

필드와 주석에 대한 Flatten()의 차이는 무엇인가요?

양쪽 모두 인터랙티브 콘텐츠를 정적 페이지 콘텐츠에 포함하고 해당 컬렉션에서 제거합니다 — 필드의 Flatten() 에서 제거합니다 /AcroForm, 주석의 Flatten() (다음에서 다루는 주석 가이드) 페이지에서 제거합니다 /Annots.

리스트 박스에서 다중 선택을 허용할 수 있나요?

예 — Form.AddListBox()의 init 객체에 multiSelect: true을 설정하고 value에 배열을 전달하십시오.

푸시 버튼이 유용하려면 액션이 필요합니까?

action(예: { type: 'submit', url, format })은(는) 버튼을 클릭했을 때 동작하도록 만드는 요소입니다; 이것이 없으면 버튼은 렌더링되지만 동작이 연결되지 않습니다.

참조

 한국어