paint-brush
JavaScript PDF 뷰어에 주석, 수정 및 양식 편집기 도구를 추가하는 방법~에 의해@mesciusinc
142 판독값

JavaScript PDF 뷰어에 주석, 수정 및 양식 편집기 도구를 추가하는 방법

~에 의해 MESCIUS inc.11m2024/06/27
Read on Terminal Reader

너무 오래; 읽다

JavaScript PDF 뷰어를 사용하여 PDF 주석을 추가하고, 교정을 적용하고, PDF 양식 편집기 도구를 사용하는 방법을 알아보세요.
featured image - JavaScript PDF 뷰어에 주석, 수정 및 양식 편집기 도구를 추가하는 방법
MESCIUS inc. HackerNoon profile picture

더 많은 비즈니스 애플리케이션이 웹 환경으로 이동함에 따라 문서 공유 및 편집 과 같은 기능도 브라우저로 이동하는 것이 합리적입니다. 그러나 많은 상황에서 사용자는 단순히 PDF 문서를 보는 것 이상의 작업을 수행해야 합니다.


추가 정보를 제공하거나 문서에서 개인 정보를 수정하거나 문서 내의 양식 필드를 작성하기 위해 주석을 추가해야 할 수도 있습니다. 다행히 Document Solutions JavaScript PDF Viewer를 사용하면 JavaScript 애플리케이션에 이 기능을 쉽게 추가할 수 있습니다.


이 문서에서는 Document Solutions JavaScript PDF 뷰어의 다음 기능을 살펴보겠습니다.


  • JavaScript PDF 뷰어용 주석 편집기

  • 주석의 주요 기능

  • PDF에서 콘텐츠 수정

  • JavaScript PDF 뷰어용 양식 편집기

  • 양식 편집기의 주요 기능

  • PDF 뷰어의 추가 편집 옵션


이제 이러한 기능을 살펴보겠습니다.

JavaScript PDF 뷰어용 주석 편집기

Document Solutions JavaScript PDF Viewer의 주석 도구는 사용자가 PDF 문서의 중요한 정보를 검토하고 표시하는 데 도움이 됩니다. 또한 원본 내용을 유지하면서 기존 PDF 문서에 주석을 추가, 수정 및 제거할 수도 있습니다.


사용자는 PDF에 주석을 달고 서로의 의견에 댓글을 달고 답글을 달 수 있습니다. 주석을 숨기는 기능을 통해 사용자는 원본 문서를 쉽게 보고 인쇄할 수 있으며, 필요한 경우 주석이 포함된 사본을 인쇄할 수도 있습니다. 주석 편집기는 문서의 모든 주석을 나열하므로 기존 주석에 액세스하고 수정할 수 있습니다.


주석 편집기

사용 사례 및 이점

일반적으로 사용자는 PDF에 주석을 달기 위해 Adobe Acrobat을 사용합니다. 편집 기능이 포함된 뷰어를 사용하면 사용자는 애플리케이션 간에 앞뒤로 이동할 필요 없이 애플리케이션에서 바로 문서에 주석을 달 수 있습니다. 보시다시피 편집 기능이 포함된 뷰어는 비즈니스 작업 흐름을 크게 간소화할 수 있습니다.


다음은 이 기능이 도움이 될 수 있는 몇 가지 예입니다.


  • 회사 직원이 검토를 위해 경영진에게 재무 보고서를 보내려고 합니다. 경영진은 PDF 뷰어에서 온라인으로 보고서를 열고, 주석을 사용하여 변경 사항을 제안하고, 직원에게 의견이 작성되었음을 알릴 수 있습니다. 그런 다음 직원은 온라인 편집기에서 문서를 열고 작성된 주석을 사용하여 뷰어에서 업데이트할 수 있습니다.


  • 한 직원이 회사의 급여 구조에 대해 의문을 갖고 있습니다. PDF 뷰어에서 문서를 읽고, 기밀 정보를 수정하고, 주석 도구를 통해 설명이 필요한 영역을 표시할 수 있습니다.


  • 웹사이트 디자이너는 웹사이트의 스크린샷을 준비하고 이를 PDF로 결합하여 검토용으로 보냅니다. 검토자는 주석 도구를 사용하여 변경이 필요한 영역을 표시합니다.


Document Solutions JavaScript PDF Viewer의 주석 도구를 사용하면 이러한 모든 시나리오가 가능해집니다. 주석에 포함된 기능을 살펴보겠습니다.

주석의 주요 기능

주석에는 다음과 같은 주요 기능을 사용할 수 있습니다.


  • 다양한 주석으로 PDF 편집
  • 사용자 친화적인 UI를 통해 중요한 정보 표시
  • 새 PDF와 기존 PDF에서 주석 추가, 수정 및 제거
  • PDF 컨텐츠 향상 및 주석 관련 속성 적용
  • 수정 없이 원본 PDF 인쇄
  • 클라이언트에 주석과 함께 수정된 PDF 저장

다양한 주석으로 PDF 편집

Document Solutions PDF Viewer는 PDF 문서를 검토하는 데 필요한 모든 주석을 지원합니다. 다음을 추가할 수 있습니다.


  • 텍스트 주석(스티커 메모) - PDF에 텍스트나 스티커 메모를 추가합니다.
  • 자유 텍스트 주석 - PDF에 항상 표시되는 메모를 추가합니다.
  • 잉크 주석 - PDF에 자유롭게 낙서를 그립니다.
  • 정사각형 주석 - PDF에 직사각형/정사각형 모양을 추가합니다.
  • 원 주석 - PDF에 원 모양을 추가합니다.
  • 선 주석 - PDF에 직선을 추가합니다.
  • 폴리라인 주석 - PDF에 가장자리가 여러 개인 닫힌 모양 또는 열린 모양을 추가합니다.
  • 다각형 주석 - PDF에 다각형을 추가합니다.
  • 파일 첨부 주석 - PDF에 포함될 문서에 파일을 첨부합니다.
  • 사운드 주석 - 파일에서 가져오거나 컴퓨터 마이크에서 녹음한 사운드(.au, .aiff 또는 .wav 형식)를 추가합니다.
  • 링크 주석 - 다른 웹 페이지에 연결하고, 검색 엔진을 호출하고, JavaScript를 실행할 수 있는 링크를 추가합니다.
  • 스탬프 주석 - 로컬 또는 서버의 이미지를 PDF의 주석으로 사용합니다.

사용자 친화적인 UI를 통해 중요한 정보 표시

문서 솔루션 PDF 뷰어 주석 도구에는 사용자가 PDF에 주석을 그릴 수 있는 직관적인 UI가 있습니다. PDF 뷰어에는 주석 추가, 속성 수정 또는 기존 PDF에서 주석 삭제를 위한 별도의 주석 도구 모음 및 편집기가 포함되어 있습니다.


속성 패널 에는 문서의 주석 목록이 표시됩니다. PDF에서 주석을 선택하거나, 왼쪽 패널에서 주석별 속성을 적용하거나, 주석을 삭제할 수 있습니다.


패널의 페이지 탭에서 페이지에 있는 주석 수를 확인할 수 있습니다. 검토를 위해 문서를 보낼 때 편집된 횟수를 확인할 수 있습니다.


속성 패널

새 PDF와 기존 PDF에서 주석 추가, 수정 및 제거

JavaScript PDF 뷰어에서 PDF를 검토하는 동안 언제든지 기존 주석을 편집하거나 제거할 수 있습니다. 주석을 추가하려면 왼쪽 패널에서 주석 편집기 버튼을 클릭하면 주석 도구 모음이 표시됩니다. 주석을 클릭하고 PDF에 직접 그립니다. 주석을 선택하면 왼쪽 패널에 주석 속성이 표시됩니다. 기존 주석이 포함된 PDF를 로드하거나, 주석을 선택하거나, 속성을 수정하거나, 속성 패널에서 주석을 삭제할 수도 있습니다.


주석 추가, 수정 및 제거

PDF 컨텐츠 향상 및 주석 관련 속성 적용

사용자는 뷰어에서 주석별 속성 설정에 대한 광범위한 지원을 찾을 수 있습니다. 서식 있는 텍스트를 추가하고, 텍스트 색상을 설정하고, 테두리를 추가하고, 작성자와 제목을 설정하고, 답글을 추가하고, 주석의 경계/X/Y 위치를 설정하는 등 속성 패널에서 더 많은 작업을 수행할 수 있습니다.


주석별 속성 적용

수정 없이 PDF 인쇄

원본 PDF를 보려면 숨기기 버튼을 사용하여 주석을 숨기고 주석 없이 PDF를 인쇄할 수 있습니다.


JavaScript PDF 뷰어에서 주석 숨기기

클라이언트에 주석이 포함된 수정된 PDF 저장

PDF에 변경 사항을 적용하고 주석을 저장하려면 저장 버튼을 클릭하세요. 변경 사항을 저장하려면 뷰어를 DsPdf를 실행하는 서버에 연결해야 합니다. 변경 사항 목록과 원본 PDF가 서버로 전송되며, 서버에서 DsPdf가 변경 사항을 적용합니다. 그런 다음 수정된 PDF를 클라이언트로 다시 보내면 사용자가 저장할 수 있습니다.


주석과 함께 수정된 PDF 저장

PDF에서 내용 수정

도구 모음의 주석 수정 또는 영역 수정 옵션을 사용하면 제거할 기밀 섹션을 표시하는 데 도움이 됩니다. 사용자가 교정할 영역을 표시할 수 있도록 테두리 표시 색상 및 표시 채우기 색상을 설정할 수 있습니다. 사용자는 편집된 콘텐츠 위로 마우스를 가져갈 때 적용할 속성(예: 오버레이 채우기 색상 , 오버레이 텍스트 , 오버레이 텍스트 정렬반복 텍스트 속성)을 설정할 수 있습니다. 문서에서 내용이 제거되면 이러한 모든 옵션이 PDF에 나타납니다.


속성 패널의 교정 적용 버튼을 사용하여 특정 콘텐츠를 교정할 수도 있습니다. 교정이 적용되면 도구 모음의 교정 재설정 버튼을 사용하여 교정을 재설정할 수 있습니다. 그러나 PDF를 저장하면 교정된 정보에 더 이상 액세스할 수 없으며 적용된 교정을 재설정할 수 없습니다.


개별 교정 주석을 적용하거나 모든 교정 적용 버튼을 클릭하여 전체 문서에 교정을 적용할 수 있습니다. 교정이 적용된 PDF를 저장하면 교정된 내용이 PDF에서 완전히 제거됩니다. 사용자는 제거된 자료를 선택하거나 다른 문서에 복사할 수 없으며, 다른 PDF 도구를 사용하여 수정된 내용을 읽을 수 없습니다.


PDF 콘텐츠 수정

JavaScript PDF 뷰어용 양식 편집기

이제 양식 편집기를 사용하여 온라인에서 대화형 PDF 양식을 디자인할 수 있습니다. 편집기는 양식을 생성할 때 다양한 양식 필드와 고급 속성을 사용하는 데 도움이 됩니다. 온라인으로 양식을 작성하고 제출할 수도 있습니다.


양식 편집기의 기능은 다음과 같습니다.


  • 처음부터 새 PDF 양식 만들기
  • PDF 양식 디자인, 채우기, 제출 및 재설정
  • 사용자로부터 직접 데이터를 수집하고 PDF 양식을 채웁니다.
  • 외부 소스(데이터베이스, JSON 등)의 양식 필드에 데이터를 입력합니다.
  • 기존 PDF 문서에 양식 필드 추가
  • 기존 PDF 문서의 양식 필드 편집
  • PDF 양식에 JavaScript 기능 추가
  • 양식 필드에 다양한 속성 적용
  • PDF 양식을 디자인하기 위한 빠르고 직관적인 UI 도구 모음 및 속성 패널
  • 맞춤형 UI 구축 - 툴바에서 불필요한 필드 생략

웹 기반 PDF 양식 디자이너의 필요성

  • PDF 형식은 레이아웃과 모양에 가장 선호되는 형식입니다. 따라서 HTML 양식이 널리 사용되더라도 PDF 양식은 항상 사용자가 디자인한 대로 보입니다.


  • 대부분의 응용 프로그램은 웹 기반이며 Document Solutions PDF Viewer는 PDF 양식 작성, PDF 편집, 주석 추가 및 수정된 PDF를 클라이언트에 저장하기 위한 원스톱 온라인 도구입니다. 단일 응용 프로그램에서 PDF를 생성하고 보관하는 더 빠른 방법입니다.


  • 개발자는 Acrobat에서 PDF 양식을 작성하고 온라인으로 공유할 수 있습니다. 그러나 브라우저의 기본 뷰어에서 열린 PDF는 사용자 정의할 수 없으며 개발자는 콘텐츠 제출 또는 콘텐츠를 양식 데이터로 채우는 등 양식에 추가 JavaScript 작업을 사용할 수 없습니다. 문서 솔루션 PDF 뷰어는 제출 및 재설정 작업을 통해 양식에 설정할 수 있는 추가 JavaScript 작업을 지원합니다.


  • Microsoft Word를 사용하여 양식을 만들거나 PDF 편집기를 사용할 수 있습니다. 복잡한 편집 도구가 필요하기 때문에 Word에서 PDF 양식을 만드는 것은 어려울 수 있습니다. 문서 솔루션 PDF 뷰어 양식 디자이너는 직관적이며 사용자 친화적인 UI와 양식 필드에 원하는 속성을 설정하는 속성 패널을 포함합니다.


  • 모든 브라우저에서 보고 채울 수 있도록 PDF 양식을 디자인할 수 있습니다. 또한 모양이나 최종 사용자가 Adobe Acrobat을 가지고 있는지 여부에 대해 걱정할 필요가 없습니다.

만들 수 있는 다양한 유형의 PDF 양식

양식 디자이너를 사용하여 다음 PDF 양식을 만들 수 있습니다.


  • 등록 양식 (예: 행사, 대학 강좌, 회원, 환자 이력, 콘테스트 등)

  • 신청서(예: 취업 지원서, 대출 신청서 등)

  • 피드백 양식 (예: 이벤트, 웹사이트, 전자상거래 등)

  • 요청 양식(예: 임대, 정보, 지불 양식 등)


JavaScript PDF 양식 편집기

PDF 양식 디자이너의 주요 기능

문서 솔루션 JavaScript PDF 뷰어는 PDF를 대화형으로 만들고 완성하는 데 도움이 되는 여러 유형의 양식 필드를 지원합니다.


  • 텍스트 필드 - 사용자가 이름, 전화번호 등의 텍스트를 입력할 수 있습니다.
  • 비밀번호 필드 - 사용자가 문서의 비밀번호를 입력할 수 있습니다.
  • 텍스트 영역 필드 - 경력, 주소 등과 같은 긴 형식의 텍스트를 추가할 수 있습니다.
  • CheckBox 필드 - 사용자가 여러 옵션을 선택할 수 있습니다.
  • 콤보 텍스트 필드 - 동일한 간격의 위치에 텍스트를 추가할 수 있습니다(예: 등록 양식에 날짜, 이메일 등 입력).
  • 콤보박스 필드 - 팝업 메뉴에서 항목을 선택하거나 값을 입력할 수 있습니다.
  • ListBox 필드 - 선택 옵션 목록을 표시합니다.
  • 푸시버튼 필드 - 개별 파일 열기, 팝업 메시지 표시 등과 같은 특정 작업을 트리거하는 대화형 버튼입니다.
  • RadioButton 필드 - 사용자가 하나만 선택할 수 있는 옵션 그룹을 표시합니다.
  • 제출 버튼 필드 - 채워진 양식을 제출할 수 있습니다.
  • 재설정 버튼 필드 - 양식을 재설정할 수 있습니다.

PDF 양식을 디자인하기 위한 사용자 친화적인 UI

문서 솔루션 양식 편집기 도구에는 PDF에 양식 필드를 추가할 수 있는 사용자 친화적인 UI가 있습니다. PDF 뷰어에는 양식 필드를 추가하거나 속성을 수정하거나 기존 PDF에서 삭제할 수 있는 별도의 양식 필드 도구 모음 및 편집기가 포함되어 있습니다. 속성 패널 에는 문서의 양식 필드 목록이 표시됩니다. PDF에서 임의의 양식 필드를 선택하고, 왼쪽 패널에서 양식 필드별 속성을 적용하고, 양식 필드를 삭제할 수 있습니다. 패널의 페이지 탭에서 페이지에 존재하는 양식 필드 수를 확인할 수도 있습니다.


양식 필드 도구 모음 및 편집기

새 PDF 양식 또는 기존 PDF 양식에서 양식 필드 추가, 수정 및 제거

언제든지 온라인 뷰어에서 PDF 양식을 디자인하는 동안 기존 양식 필드를 변경하고 제거할 수도 있습니다. 양식 필드를 추가하려면 왼쪽 패널에서 양식 편집기 버튼을 클릭하면 양식 편집기 도구 모음이 표시됩니다. 양식 필드를 클릭하고 PDF 페이지에 직접 그립니다. 양식 필드를 선택하면 왼쪽 패널에 양식 필드 속성이 표시됩니다. 기존 양식 필드가 있는 PDF 양식을 로드하거나, 양식 필드를 선택하거나, 속성을 적용하거나, 속성 패널에서 삭제 옵션을 선택하여 양식 필드를 삭제할 수도 있습니다.

양식 필드 추가, 수정 및 제거

양식 필드별 속성으로 PDF 양식 향상

뷰어가 지원하는 각 양식 필드에 대한 양식 필드별 속성을 설정하기 위한 광범위한 지원이 있습니다. 몇 가지 일반 기능 중에서 이름, 읽기 전용, 값, 정렬, 배경색, 최대 길이, 테두리 속성, 글꼴 크기를 설정하고 양식 필드의 경계/X/Y 위치를 설정할 수 있습니다.


또한 TextField, PasswordField, TextArea 및 ComboText Field와 같은 텍스트 필드에 필수 속성을 설정할 수 있습니다.


양식 필드별 속성으로 PDF 양식 향상

원본 PDF 양식 인쇄

원본 PDF 파일을 보려면 기본 도구 모음의 숨기기 버튼을 사용하여 양식 필드를 숨기고 양식 필드 없이 PDF 파일을 보거나 인쇄할 수 있습니다.


양식 필드 숨기기

클라이언트의 양식 필드와 함께 새로 디자인된 PDF 저장

PDF 문서에 변경 사항을 적용하고 양식 필드를 저장합니다. 이 작업을 수행하려면 원본 PDF와 변경 사항 목록을 얻고, 변경 사항을 적용하고, 수정된 PDF를 클라이언트로 다시 보내려면 서버에 DsPdf 제품이 필요합니다.

PDF 양식 작성 및 제출

PDF 양식을 디자인한 후 사용자가 PDF 양식을 작성하여 뷰어에 제출하도록 할 수 있습니다. 양식 데이터는 데이터베이스에 제출되거나 채워진 값에서 PDF로 생성됩니다. 데이터베이스에서 뷰어로 양식 데이터를 PDF 양식으로 가져올 수도 있습니다.


PDF 양식 작성 및 제출

PDF 뷰어의 추가 편집 옵션

주석, 수정 및 양식 필드 외에도 다음 기능을 사용하여 PDF 문서를 작업하고 편집할 수 있습니다.

빈 PDF 문서 만들기

PDF 뷰어를 사용하여 새 문서 버튼을 사용하여 PDF 문서를 생성할 수 있습니다. 주석양식 편집기 도구를 통해 PDF 또는 PDF 양식을 디자인할 수 있습니다.


JavaScript PDF 뷰어를 사용하여 빈 PDF 문서 만들기

PDF 문서에서 새 페이지 추가 및 페이지 삭제

새 페이지 버튼을 사용하여 기존 PDF 문서나 원본 PDF 문서에 새 페이지를 추가할 수 있으며, 삭제 버튼을 사용하여 페이지를 삭제할 수 있습니다.


PDF 문서에서 새 페이지 추가 및 페이지 삭제

PDF 문서에서 주석/양식 필드 선택 및 삭제

언제든지 주석 편집기 및 양식 편집기 보기에서 PDF 문서에 추가된 주석/양식 필드를 선택할 수 있습니다. 삭제 버튼을 사용하여 새 PDF 문서나 기존 PDF 문서에서 주석이나 양식 필드를 삭제합니다.


PDF 문서에서 주석/양식 필드 삭제

실행 취소 및 다시 실행 변경 사항

주석 또는 양식 필드에 대한 변경 사항을 실행 취소하거나 다시 실행하려면 주석 및 양식 편집기 모두에서 실행 취소/다시 실행 버튼을 사용할 수 있습니다. 이 버튼은 변경 사항을 점진적으로 기록하므로 결과에 만족할 때까지 작업을 계속 실행 취소하거나 다시 실행할 수 있습니다.


PDF 변경 사항 실행 취소 및 다시 실행

결론

이를 통해 Document Solutions JavaScript PDF Viewer의 주석, 수정 및 양식 필드 기능을 살펴보았습니다. 지금까지 살펴본 것처럼 자신만의 주석을 추가하고, 표시되어서는 안 되는 정보를 수정하고, 양식 필드를 추가/편집하여 대화형 PDF 양식을 만드는 것이 이보다 더 쉬울 수 없습니다.