4,075 판독값

웹용 Foxit PDF SDK를 사용하여 사용자 정의 양식 필드를 만드는 방법에 대한 안내

~에 의해 Foxit Software8m2023/11/17

너무 오래; 읽다

이 튜토리얼에서는 웹용 Foxit PDF 라이브러리를 사용하여 웹 브라우저 PDF 문서에서 사용자 정의 양식 필드를 만드는 방법을 알려줍니다.

featured image - 웹용 Foxit PDF SDK를 사용하여 사용자 정의 양식 필드를 만드는 방법에 대한 안내

PDF 형식은 다양한 문서 유형에 대한 다목적 솔루션 역할을 하면서 현대 소프트웨어에서 없어서는 안 될 요소가 되었습니다. 안전하고 편집 가능하며 사용자 친화적인 PDF를 찾는 기업에게 Foxit은 귀중한 선택입니다. Foxit의 PDF SDK 라이브러리는 다양한 산업에 맞는 다양한 기능을 자랑합니다.

특히 웹 브라우저 기반 PDF는 문서 관리에서 수많은 응용 프로그램을 찾습니다. 이들은 수많은 은행 시스템에서 중추적인 역할을 하며 월별 명세서 생성과 같은 작업을 촉진합니다. 또한 규정 준수 업계에서는 안전한 데이터 수집 및 저장을 위해 웹 기반 PDF를 사용합니다.

이 튜토리얼은 웹용 Foxit PDF SDK를 활용하여 웹 브라우저 PDF 문서 내에서 사용자 정의 양식 필드를 만드는 과정을 안내합니다. 함께 제공되는 GitHub 저장소를 사용하면 튜토리얼에 설명된 단계를 따르고 구현할 수 있습니다.

웹용 Foxit PDF SDK란 무엇입니까?

Foxit에서 제공하는 다양한 PDF SDK 중에서 웹용 Foxit PDF SDK는 Foxit 렌더링 엔진의 장점을 활용하는 포괄적인 PDF 라이브러리로 돋보입니다. 이 SDK를 사용하면 포괄적이고 완전히 사용자 정의 가능한 PDF 뷰어를 애플리케이션에 원활하게 통합할 수 있습니다.

Foxit의 SDK로 제작된 웹 PDF를 사용하면 사용자는 JavaScript를 사용하여 모바일 또는 데스크톱 브라우저에서 직접 다양한 언어로 된 문서를 쉽게 보고, 작성하고, 주석을 달고, 서명할 수 있습니다. SDK는 Firefox, Safari, Chrome, Opera를 포함한 모든 주요 브라우저와 호환됩니다.

기능을 설명하기 위해 필요한 구조를 제공하기 위해 웹용 Foxit PDF SDK를 사용하여 템플릿에서 새 PDF 프로젝트를 만드는 작업을 시작합니다. 이 실습 접근 방식은 SDK가 웹 기반 프로젝트 내에서 PDF 기능을 향상시키는 방법에 대한 실제적인 시연을 제공합니다.

웹용 Foxit PDF SDK 구현

웹용 Foxit PDF SDK를 다운로드하세요 . ZIP 파일에는 SDK, 설명서 및 예제가 포함되어 있어야 합니다.

압축이 풀린 디렉터리에서 HTTP 서버를 실행하여 이러한 예제를 미리 볼 수 있습니다.

 # NPX available with NPM v5.2 or newer npx http-server

프로젝트 설정

이 튜토리얼에서는 프런트엔드 툴링을 위해 Vite를 사용합니다. ES 모듈(ESM)을 기반으로 하며 빠르며 SDK를 사용하는 데 필요한 모든 것이 즉시 제공됩니다. 템플릿에서 새 프로젝트를 만들고 개발 서버를 시작하려면 Node.js 버전 12.2.0 이상이 있는지 확인하고 다음 명령을 실행하세요.

 npm create vite@latest project -- --template vanilla cd project npm install npm run dev

SDK를 생성된 디렉터리로 이동합니다. 이 자습서의 나머지 부분에서는 SDK가 상위 프로젝트 디렉터리를 기준으로 ./FoxitPDFSDKForWeb 에서 사용 가능한 것으로 가정합니다.

PDF 로드

실험을 시작하려면 문서가 업로드된 PDF 뷰어가 필요합니다. PDF 뷰어를 초기화하려면 먼저 HTML 구조를 생성하고 SDK를 로드하세요.

 <!-- index.html --> <!-- ... --> <body> <div class="container"> <div id="viewer"></div> <div id="menu"></div> </div> <script src="./FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script> <script type="module" src="/main.js"></script> </body> <!-- ... -->

또한 style.css 에서 몇 가지 CSS를 추가하여 요소의 스타일을 지정합니다.

 /* style.css */ html { height: 100%; }b ody { height: 100%; margin: 0; }. container { width: 100%; height: 100%; display: flex; }# viewer { height: 100%; flex: 1; overflow: auto; }# menu { width: 10rem; }. menu-element { background: #f1f5f9; padding: 1rem; display: flex; justify-content: center; align-items: center;font-family: monospace; margin: 0.5rem; }

main.js 내에서 SDK를 사용하여 pdfViewer 인스턴스를 만듭니다.

 import "./style.css"; const licenseSN = "..."; const licenseKey = "..."; const viewerContainer = document.getElementById("viewer"); const pdfViewer = new PDFViewCtrl.PDFViewer({ libPath: "./FoxitPDFSDKForWeb/lib", jr: { licenseSN, licenseKey, }, customs: { ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(viewerContainer), }, });

./FoxitPDFSDKForWeb/examples/license-key.js 파일 내에서 LicenseSN 및 LicenseKey 값을 찾을 수 있습니다.

pdfViewer는 다음을 포함하는 구성 객체를 생성자에게 제공하여 생성됩니다.

libPath: 압축이 풀린 SDK 패키지의 lib 폴더에 대한 상대 경로
jr: 가장 중요한 라이센스 정보를 포함하는 JR 엔진의 구성 옵션
customs.ScrollWrap: PDF 크기 조정 및 스크롤을 제어하는 사용자 정의 구성 요소로, 이를 설정하면 뷰어가 컨테이너에 맞게 조정됩니다.

pdfViewer가 생성되면 이를 초기화하고 문서를 로드하기만 하면 됩니다.

 // ... const loadPDF = async (url) => { const response = await fetch(url); const blob = await response.blob();return pdfViewer.openPDFByFile(blob); }; pdfViewer.init(viewerContainer); loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf");

위의 코드 조각은 PDF 파일을 blob 으로 가져오고 openPDFByFile() 메서드를 사용하여 뷰어에서 엽니다. 사용된 PDF 문서는 SDK에 포함된 문서의 데모 가이드입니다.

오른쪽의 추가 공간은 드래그 가능한 양식 필드의 메뉴 역할을 합니다.

사용자 정의 양식 필드 만들기

Foxit SDK를 사용하여 양식 필드를 생성하는 데 필요한 것은 뷰어, 양식 필드의 메타데이터(예: 필드 유형 또는 선택 옵션) 및 양식 필드 위치입니다. 이 예에서는 사용자가 뷰어에 끌어서 놓을 수 있는 준비된 메타데이터가 포함된 사전 정의된 양식 필드 세트를 만듭니다.

메타데이터 정의

허용된 필드와 추가 도우미에 대한 메타데이터를 정의하는 것부터 시작하세요.

 // ... const menuContainer = document.getElementById("menu"); const randomId = () => `_${Math.random().toString(36).substring(2, 9)}`; const FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type; const formFields = [ { label: "Push Button", name: "push-button", type: FieldTypes.PushButton, width: 50, height: 30, }, { label: "Checkbox", name: "checkbox", type: FieldTypes.CheckBox, width: 50,height: 30, }, { label: "Radio Button", name: "radio-button", type: FieldTypes.RadioButton, width: 80, height: 30, }, { label: "Combo Box", name: "combo-box", type: FieldTypes.ComboBox, width: 60, height: 30, }, { label: "List Box", name: "list-box", type: FieldTypes.ListBox, width: 60, height: 100, }, { label: "Text", name: "text", type: FieldTypes.Text, width: 60, height: 30, }, ]; const comboBoxOptions = [ { label: "10", value: "10", selected: true, defaultSelected: true }, { label: "20", value: "20", selected: false, defaultSelected: false }, { label: "30", value: "30", selected: false, defaultSelected: false }, { label: "40", value: "40", selected: false, defaultSelected: false }, ]; const listBoxOptions = comboBoxOptions;

randomId() 함수는 문서 내의 양식 필드를 식별하기 위해 ID를 생성합니다. FieldTypes는 SDK에서 사용할 수 있는 사전 정의된 필드 유형을 더 빠르게 참조하기 위한 바로가기입니다. 각 양식 필드 항목에는 다음이 포함됩니다.

사용자에게 용도를 알리는 라벨
드래그한 요소를 메타데이터 항목과 일치시키기 위한 이름
필드 유형을 나타내는 유형
PDF 내에서 위치 직사각형을 계산하기 위한 너비 와 height

마지막으로,omboBoxOptions 및 listBoxOptions에는 사용자가 하나를 선택해야 하는 필드에 대한 샘플 옵션이 포함되어 있습니다.

드래그 앤 드롭 요소 생성

메타데이터가 준비되면 끌어서 놓기 논리와 양식 필드 배치를 처리하기 위한 함수를 만들 수 있습니다.

 // ... const loadFormFieldsMenu = async (PDFDoc) => { const PDFForm = await PDFDoc.loadPDFForm(); formFields.forEach((formField) => { const element = document.createElement("div"); element.draggable = true; element.id = formField.name; element.classList.add("menu-element"); element.textContent = formField.label; element.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", event.target.id); }); menuContainer.append(element); }); };

이 함수는 PDF 문서를 나타내는 SDK 개체인 PDFDoc를 인수로 받아들입니다. 이는 해당 필드가 드래그 가능한 요소로 처리되어 사이드 메뉴에 추가된 후 양식 필드를 추가하고 구성하는 데 사용되는 PDFForm 개체를 검색하는 데 사용됩니다.

각 요소에는 드래그를 허용하기 위해 true 로 설정된 draggable 속성과 기본 메타데이터와 일치시키기 위한 각 양식 필드의 고유 이름에 해당하는 ID가 있습니다. 이 ID는 나중에 dragstart 이벤트 리스너 내에서 드래그 앤 드롭 작업 중에 전송하는 데 사용됩니다.

loadFormFieldsMenu() 함수에 필요한 PDFDoc 매개변수를 얻으려면 아래와 같이 수정하여 loadPDF() 함수의 결과 Promise를 얻어야 합니다.

 // ... loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf").then( (PDFDoc) => { loadFormFieldsMenu(PDFDoc); } );

메뉴 항목이 생성되면 앱은 이제 다음과 같이 보입니다.

드래그 앤 드롭 기능 구현

드래그 가능한 요소를 만들었으면 이제 드래그 앤 드롭 기능을 완전히 구현하고 뷰어에서 양식 필드를 생성할 수 있습니다.

 // ... const loadFormFieldsMenu = async (PDFDoc) => { // ... viewerContainer.addEventListener("dragover", (event) => { event.preventDefault(); }); viewerContainer.addEventListener("drop", async (event) => { event.preventDefault(); const droppedFormFieldName = event.dataTransfer.getData("text/plain"); const formField = formFields.find( ({ name }) => name === droppedFormFieldName ); const pos = await pdfViewer.convertClientCoordToPDFCoord({ clientX: event.clientX, clientY: event.clientY, }); const id = randomId();await PDFForm.addControl(pos.index, id, formField.type, { left: pos.left - formField.width / 2, right: pos.left + formField.width / 2, top: pos.top + formField.height / 2, bottom: pos.top - formField.height / 2, }); const field = PDFForm.getField(id); if (formField.type === FieldTypes.ComboBox) { field.setOptions(comboBoxOptions); } else if (formField.type === FieldTypes.ListBox) { field.setOptions(listBoxOptions); } }); }; // ...

위 코드에서 dragover 이벤트 리스너는 PreventDefault() 를 호출하여 drop 이벤트에서 처리할 상호작용을 전달합니다.

드롭 이벤트 핸들러 내에서 일치하는 메타데이터는 먼저 드래그된 요소의 데이터를 사용하여 검색됩니다. 그런 다음 이벤트의 마우스 위치는 pdfViewer 인스턴스에서 사용할 수 있는 ConvertClientCoordToPDFCoord() 메서드를 사용하여 PDF 좌표로 변환됩니다.

위치, 메타데이터 및 무작위로 생성된 ID는 함수에서 이전에 생성된 PDFForm 객체의 addControl() 메서드 호출에 사용됩니다. 이 메서드는 다음 인수를 허용합니다.

양식 필드를 배치할 페이지의 인덱스( convertClientCoordToPDFCoord() 호출에서 검색됨)
새로 생성된 양식 필드에 대해 무작위로 생성된 ID
제공된 상수에 따른 양식 필드 유형(메타데이터에서 검색)
직사각형 형태의 양식 필드 배치를 정의하는 인수로, 마우스 좌표를 양식 필드의 중심으로 만들기 위해 너비 와 높이를 사용하여 계산됩니다.

마지막으로 필드가 옵션 목록을 허용하는 경우 먼저 ID를 사용하는 PDFForm 개체의 getField() 메서드에 의해 액세스됩니다. 옵션은 setOptions() 메서드를 사용하여 적절하게 설정됩니다.

몇 가지 양식 필드가 이미 배치된 최종 앱은 다음과 같습니다.

결론

PDF에 기능을 추가하면 실제로 조직과 사용자에게 상당한 이점을 가져올 수 있습니다. 전자 업데이트와 서명을 통해 시간, 비용, 노력을 절약할 수 있으며, 맞춤형 보안 문서로 회사에 대한 신뢰도를 높일 수 있습니다.

앞에서 설명했듯이 Foxit의 다국어 PDF 도구는 웹용 Foxit PDF SDK와 결합되어 강력한 솔루션을 제공합니다. 사용자 정의 양식 필드를 만들고, 끌어서 놓기 기능을 구현하고, 다양한 기능을 잠금 해제할 수 있습니다. 그러나 이것은 빙산의 일각에 불과합니다. 웹용 Foxit PDF SDK는 PDF 기능을 더욱 향상시키기 위한 포괄적인 기능 세트를 제공합니다.

가능성에 대해 더 자세히 알아보려면 SDK에서 제공하는 공식 문서 와 추가 리소스를 참조하세요. 설명서는 고급 기능, 사용자 정의 옵션 및 모범 사례를 안내합니다.

튜토리얼을 검토하거나 작업 내용을 확인하려면 튜토리얼과 연결된 GitHub 저장소를 참조하세요. 저장소에는 튜토리얼에서 다루는 개념을 이해하고 구현하는 데 도움이 되는 소스 코드, 예제 및 추가 자료가 포함될 수 있습니다.