웹 애플리케이션 개발
웹 응용 프로그램을 개발하려면 다음 작업을 완료해야 합니다.
- Visual Builder 애플리케이션을 생성합니다.
- 새 웹 애플리케이션을 생성합니다.
- 외부 라이브러리를 포함시킵니다.
- 사용자 인터페이스를 만듭니다.
- 업로드된 PDF 문서를 업데이트합니다.
- 새 PDF 문서를 생성합니다.
- PDF 파일을 다운로드합니다.
Visual Builder 애플리케이션 생성
Visual Builder 애플리케이션은 웹 및 모바일 애플리케이션을 개발하는 데 사용하는 리소스 모음입니다. Visual Builder 애플리케이션은 데이터 소스 및 비즈니스 객체를 설명하는 메타데이터를 JSON 파일에 포함합니다. 또한 웹 및 모바일 응용 프로그램용 HTML 및 JavaScript 파일도 포함합니다.
- : 시각적 애플리케이션 홈 페이지에서 새로 만들기를 누릅니다.
- Create Application 대화상자에서 응용 프로그램 이름을 입력합니다. 애플리케이션 ID 필드는 제공한 애플리케이션 이름에 따라 자동으로 채워집니다.
- 필요한 경우 애플리케이션 ID를 수정할 수 있지만 ID는 ID 도메인에서 고유해야 합니다.
- Empty Application의 기본 선택 사항을 변경하지 않은 상태로 둡니다. 이 템플리트는 아티팩트, 앱 또는 기타 리소스를 생성하지 않습니다.
- 완료를 누릅니다.
새 Visual Builder 애플리케이션은 생성 후 자동으로 열리고 시작 화면이 표시됩니다. 새 애플리케이션은 아티팩트를 포함하지 않지만 마법사는 기본적으로 애플리케이션의 파일 구조와 필요한 일부 리소스 및 파일을 생성합니다.
새 웹 애플리케이션 생성
Visual Builder 애플리케이션의 웹 앱은 서로 독립적이지만 모두 애플리케이션에 정의된 데이터 소스를 사용할 수 있습니다.
외부 라이브러리 포함
"시작하기 전에"에 지정된 대로 PDF 문서를 생성, 수정 및 다운로드하려면 두 개의 외부 라이브러리(pdf-lib
및 downloadj
)를 포함해야 합니다.
pdf-lib
는 PDF 문서를 관리합니다.downloadj
는 생성된 PDF 문서를 다운로드합니다.
index.html
파일에 두 라이브러리 소스를 삽입합니다.
<script src="https://unpkg.com/pdf-lib@1.4.0"></script>
<script src="https://unpkg.com/downloadjs@1.4.7"></script>
사용자 인터페이스 생성
이제 사용자 인터페이스를 만듭니다. 이 인터페이스에는 컨테이너, 헤더, 버튼, 텍스트 필드, JavaScript 코드 및 HTML 코드와 같은 구성요소가 포함되어야 하며 사용자가 다음을 수행할 수 있습니다.
- 파일을 업로드합니다.
- PDF 문서에 표시할 필드 텍스트를 입력하십시오.
- 업로드된 PDF 문서를 입력한 텍스트로 업데이트하려면 단추를 누르십시오.
- 버튼을 눌러 입력한 텍스트가 포함된 새 PDF 문서를 생성합니다.
- 단추를 눌러 준비된 문서를 다운로드합니다.
기본 페이지 화면에 업로드된 PDF 파일 표시
기본 페이지의 소스 HTML에서 이전에 지정된 페이지 변수 fileURL
를 소스와 함께 객체를 추가합니다. 기본 HTML 페이지에 fileURL
객체를 추가합니다. 이 단계에서 응용 프로그램은 PDF 파일을 업로드하고 표시할 수 있습니다.
addPDFDocument 함수의 출력을 페이지 변수 fileURL 및 holdFile에 지정
반환된 addPDFDocument
함수 속성 URL 및 데이터를 페이지 변수 fileURL
및 holdFile
에 각각 지정합니다.
addPDFDocument 함수 생성
addPDFDocument
함수를 생성합니다. 응용 프로그램은 하나의 입력 파라미터를 수신합니다. 이 함수는 입력 파일 매개변수를 기반으로 URL 변수를 인스턴스화한 다음 업로드된 문서를 읽고 base64 문자열로 변환합니다. 이 코드 샘플을 사용하여 함수를 정의할 수 있습니다.
PageModule.prototype.addPDFDocument = function(arg1) {
return new Promise(
resolve=>{
const blobURL = URL.createObjectURL(arg1);
const reader = new FileReader();
reader.addEventListener("load", function () {
// convert image file to base64 string
resolve({ data: reader.result, url: blobURL });
}, false);
if (arg1) {
reader.readAsDataURL(arg1);
}
}
);
};
업로드된 PDF 문서 업데이트
컴포넌트 팔레트에서 [텍스트 필드] 컴포넌트를 페이지 디자이너로 끌어 놓고 이 아래의 새 단추로 끌어 놓습니다.
- 텍스트 필드의 콘텐츠를 저장할 페이지 변수
textIncludedIntoPDF
를 생성합니다. 이 변수는 콘텐츠를 삽입하고 PDF 문서와 함께 업데이트합니다. - 이 변수를 Input Text 구성 요소에 할당합니다.
PDF 업데이트 및 표시
update_display_pdf
이라는 새 작업 체인을 생성합니다.
UpdatePDF 함수 생성
그런 다음 JavaScript 함수 createUpdatePDF
를 생성합니다. 두 개의 입력 매개변수(업로드된 PDF 문서 및 사용자가 이전에 기본 페이지에 입력한 텍스트)가 있는 비동기 함수입니다. 바이트 배열을 반환합니다.
업데이트된 PDF 문서 표시
UpdatePDF
함수의 결과가 임시 페이지 변수 tmpPDFBytes
에 지정됩니다. 이 지정 이후 JavaScript 함수는 base64 바이트 배열을 수신하고 이 바이트 배열에서 새 blob 엔티티를 인스턴스화합니다. 마지막으로 이 함수는 이 PDF 문서에 해당하는 URL을 생성하고 반환합니다.
PageModule.prototype.displayPDFDocument = function (arg1) {
const bytes = new Uint8Array( arg1 );
// create a new blobfrom the byte array with type of application: pdf
const blob = new Blob( [ bytes ], { type: "application/pdf" } );
// create the url of the generated blob entity
const newdocURL = URL.createObjectURL(blob);
// return the updated pdf's url
return newdocURL;
};
이 함수의 출력은 페이지에 업데이트된 PDF 문서를 표시하는 데 사용되는 페이지 변수 fileURL
에 지정됩니다.
이 시점에서 응용 프로그램은 PDF 문서를 업로드하고 사용자가 화면의 텍스트 필드에 입력한 텍스트로 수정한 다음 업데이트된 PDF 문서를 화면에 표시합니다.
새 PDF 문서 생성
문서 생성 및 표시
새 이벤트를 생성하여 새 PDF 생성 단추로 실행되는 작업을 정의합니다. 이벤트가 create_display_pdf
레이블을 사용하여 새 작업 체인을 만듭니다.
새 작업 체인은 JavaScript 함수를 사용하여 새 PDF(텍스트 필드에 이전에 입력한 텍스트 포함)를 생성한 다음 임시 페이지 변수를 통해 두번째 JavaScript 함수를 사용하여 새 PDF 문서를 재생성하고 표시합니다.
PDF 파일 다운로드
구성요소 팔레트에서 버튼 구성요소를 끌어 놓아 페이지 디자이너에 포함합니다.
문서 다운로드
PDF 다운로드 단추에 대한 새 이벤트 작업을 생성합니다. 이벤트가 downloadPDF
라는 새 작업 체인을 만듭니다. 새 작업 체인은 JavaScript 함수를 사용하여 사용자가 텍스트 필드에 텍스트를 입력한 텍스트를 포함하는 PDF 파일을 다운로드합니다.
PDF 파일 다운로드
downloadPDFfile
는 업로드 및 수정되었거나 처음부터 생성된 PDF 문서의 바이트 배열을 하나의 입력 매개변수로 사용하고 사전 정의된 이름 pdf-lib_modification_example.pdf
및 application/pdf
유형의 문서를 다운로드합니다.
downloadj
라이브러리에서 download()
함수를 사용합니다. download()
에 대한 입력 인수는 다음 데이터 유형일 수 있습니다.
- URL
- 문자열
- BLOB
- 형식화된 배열
dataURL
를 통해 브라우저의 다운로드 디렉토리에 배치된 새 파일의 이름과 유형입니다.
PageModule.prototype.downloadPDFFile = function (arg1) {
download(arg1, "pdf-lib_modification_example.pdf", "application/pdf");
};