PDF 형식은 다양한 문서 유형에 대한 다목적 솔루션 역할을 하면서 현대 소프트웨어에서 없어서는 안 될 요소가 되었습니다. 안전하고 편집 가능하며 사용자 친화적인 PDF를 찾는 기업에게   귀중한 선택입니다.   다양한 산업에 맞는 다양한 기능을 자랑합니다. Foxit은 Foxit의 PDF SDK 라이브러리는  특히 웹 브라우저 기반 PDF는 문서 관리에서 수많은 응용 프로그램을 찾습니다. 이들은 수많은 은행 시스템에서 중추적인 역할을 하며 월별 명세서 생성과 같은 작업을 촉진합니다. 또한 규정 준수 업계에서는 안전한 데이터 수집 및 저장을 위해 웹 기반 PDF를 사용합니다.  이 튜토리얼은 웹용 Foxit PDF SDK를 활용하여 웹 브라우저 PDF 문서 내에서 사용자 정의 양식 필드를 만드는 과정을 안내합니다. 함께 제공되는   사용하면 튜토리얼에 설명된 단계를 따르고 구현할 수 있습니다. GitHub 저장소를   웹용 Foxit PDF SDK란 무엇입니까?  Foxit에서 제공하는 다양한 PDF SDK 중에서   Foxit 렌더링 엔진의 장점을 활용하는 포괄적인 PDF 라이브러리로 돋보입니다. 이 SDK를 사용하면 포괄적이고 완전히 사용자 정의 가능한 PDF 뷰어를 애플리케이션에 원활하게 통합할 수 있습니다. 웹용 Foxit PDF SDK는  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  프로젝트 설정  이 튜토리얼에서는 프런트엔드 툴링을 위해   사용합니다. ES 모듈(ESM)을 기반으로 하며 빠르며 SDK를 사용하는 데 필요한 모든 것이 즉시 제공됩니다. 템플릿에서 새 프로젝트를 만들고 개발 서버를 시작하려면 Node.js 버전 12.2.0 이상이 있는지 확인하고 다음 명령을 실행하세요. Vite를   npm create vite@latest project -- --template vanilla cd project npm install npm run dev  SDK를 생성된 디렉터리로 이동합니다. 이 자습서의 나머지 부분에서는 SDK가 상위   디렉터리를 기준으로   에서 사용 가능한 것으로 가정합니다. 프로젝트 ./FoxitPDFSDKForWeb   PDF 로드  실험을 시작하려면 문서가 업로드된 PDF 뷰어가 필요합니다. PDF 뷰어를 초기화하려면 먼저 HTML 구조를 생성하고 SDK를 로드하세요.     <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>   또한   에서 몇 가지 CSS를 추가하여 요소의 스타일을 지정합니다. style.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; }    내에서 SDK를 사용하여   인스턴스를 만듭니다. main.js 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는 다음을 포함하는 구성 객체를 생성자에게 제공하여 생성됩니다.    압축이 풀린 SDK 패키지의   폴더에 대한 상대 경로 libPath: lib    가장 중요한 라이센스 정보를 포함하는 JR 엔진의 구성 옵션 jr:    PDF 크기 조정 및 스크롤을 제어하는 사용자 정의 구성 요소로, 이를 설정하면 뷰어가 컨테이너에 맞게 조정됩니다. customs.ScrollWrap:    생성되면 이를 초기화하고 문서를 로드하기만 하면 됩니다. 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 파일을   으로 가져오고   메서드를 사용하여 뷰어에서 엽니다. 사용된 PDF 문서는 SDK에 포함된 문서의 데모 가이드입니다.  blob openPDFByFile()  오른쪽의 추가 공간은 드래그 가능한 양식 필드의 메뉴 역할을 합니다.  사용자 정의 양식 필드 만들기  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;    함수는 문서 내의 양식 필드를 식별하기 위해 ID를 생성합니다.   SDK에서 사용할 수 있는 사전 정의된 필드 유형을 더 빠르게 참조하기 위한 바로가기입니다. 각 양식 필드 항목에는 다음이 포함됩니다. randomId() FieldTypes는  사용자에게 용도를 알리는  라벨  드래그한 요소를 메타데이터 항목과 일치시키기 위한  이름  필드 유형을 나타내는  유형  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    이벤트 핸들러 내에서 일치하는 메타데이터는 먼저 드래그된 요소의 데이터를 사용하여 검색됩니다. 그런 다음 이벤트의 마우스 위치는   인스턴스에서 사용할 수 있는   메서드를 사용하여 PDF 좌표로 변환됩니다. 드롭 pdfViewer ConvertClientCoordToPDFCoord()  위치, 메타데이터 및 무작위로 생성된 ID는 함수에서 이전에 생성된   객체의   메서드 호출에 사용됩니다. 이 메서드는 다음 인수를 허용합니다. PDFForm addControl()  양식 필드를 배치할 페이지의 인덱스(   호출에서 검색됨) convertClientCoordToPDFCoord()  새로 생성된 양식 필드에 대해 무작위로 생성된 ID  제공된 상수에 따른 양식 필드 유형(메타데이터에서 검색)  직사각형 형태의 양식 필드 배치를 정의하는 인수로, 마우스 좌표를 양식 필드의 중심으로 만들기 위해   와   사용하여 계산됩니다. 너비 높이를  마지막으로 필드가 옵션 목록을 허용하는 경우 먼저 ID를 사용하는   개체의   메서드에 의해 액세스됩니다. 옵션은   메서드를 사용하여 적절하게 설정됩니다. PDFForm getField() setOptions()  몇 가지 양식 필드가 이미 배치된 최종 앱은 다음과 같습니다.    결론  PDF에 기능을 추가하면 실제로 조직과 사용자에게 상당한 이점을 가져올 수 있습니다. 전자 업데이트와 서명을 통해 시간, 비용, 노력을 절약할 수 있으며, 맞춤형 보안 문서로 회사에 대한 신뢰도를 높일 수 있습니다.  앞에서 설명했듯이   다국어 PDF 도구는 웹용 Foxit PDF SDK와 결합되어 강력한 솔루션을 제공합니다. 사용자 정의 양식 필드를 만들고, 끌어서 놓기 기능을 구현하고, 다양한 기능을 잠금 해제할 수 있습니다. 그러나 이것은 빙산의 일각에 불과합니다. 웹용 Foxit PDF SDK는 PDF 기능을 더욱 향상시키기 위한 포괄적인 기능 세트를 제공합니다. Foxit의  가능성에 대해 더 자세히 알아보려면 SDK에서 제공하는   와 추가 리소스를 참조하세요. 설명서는 고급 기능, 사용자 정의 옵션 및 모범 사례를 안내합니다. 공식 문서  튜토리얼을 검토하거나 작업 내용을 확인하려면 튜토리얼과 연결된   참조하세요. 저장소에는 튜토리얼에서 다루는 개념을 이해하고 구현하는 데 도움이 되는 소스 코드, 예제 및 추가 자료가 포함될 수 있습니다. GitHub 저장소를    게시되었습니다. 여기에도

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Free Trial

Now Hiring

이 오디오는 이야기의 원래 언어로 제작되었습니다!

너무 오래; 읽다

Make resilience your competitive advantage

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

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

독특한 생태계를 강화하는 비트코인 UTXO 모델

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

Floki의 Valhalla가 인도 스리랑카 투어의 보조 후원자로 합류

포럼에서 피드까지: 소셜 미디어 알고리즘이 디지털 상호작용을 형성하는 방식

독특한 생태계를 강화하는 비트코인 UTXO 모델

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

Floki의 Valhalla가 인도 스리랑카 투어의 보조 후원자로 합류

포럼에서 피드까지: 소셜 미디어 알고리즘이 디지털 상호작용을 형성하는 방식

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps