[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

HTML PDF 뷰어

wijmo.viewer 모듈은 두 가지 종류의 뷰어를 포함합니다: PdfViewer와 ReportViewer. PdfViewer는 제3자 PDF 리더나 소프트웨어 없이 PDF 파일을 표시하는 가벼운 뷰어입니다. 이를 사용하여 웹 앱에서 PDF 문서를 표시할 수 있습니다.

  • 포함된 주요 기능(썸네일 표시, 스크롤, 페이징, 확대/축소 기능 등)

  • 인쇄 지원

  • 내보내기 기능

기능

문서 뷰어에서 기대할 수 있는 모든 기능을 기본적으로 제공합니다:

  • 인쇄 지원

  • 반응형 뷰어

  • 썸네일

  • 검색

  • 페이지네이션

  • 전체 화면 및 크기 조정

  • 연속 스크롤 옵션

기본 설정

C1 Web API PDFDocument Services에서 PDF 파일을 표시하려면 다음과 같은 기본 속성을 설정합니다:

  1. serviceUrl: C1 Web API PDFDocument Services의 URL

  2. filePath: PDF 파일의 전체 경로. (예: 'PdfRoot/DefaultDocument.pdf')

    여기서 'PdfRoot'는 PDF 파일이 저장된 디스크 저장소 제공자의 키이며, 서버에서 해당 PDF 파일을 찾는 데 사용됩니다.

  3. 'DefaultDocument.pdf' 는 해당 파일의 상대 경로로, 디스크 저장소 제공자에 의해 지정된 PDF 파일을 찾는 데 사용됩니다.

예제
<body>
    ...
    <div id="pdfViewer"></div>
    ...
</body>
let pdfViewer = new viewer.PdfViewer('#pdfViewer', {
        serviceUrl: 'https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/pdf',
        filePath: 'PdfRoot/DefaultDocument.pdf',
        zoomFactorChanged: (sender) => {
            zoomFactor.value = sender.zoomFactor;
        }
});

C1 Web API PDFDocument Services는 C1PdfDocumentSource를 사용하여 PDF 파일을 렌더링하고 내보냅니다. 설정 방법에 대한 자세한 내용은 C1 Web API PDFDocument Services 설정 방법을 참조하십시오.


또한 PdfViewer 컨트롤에는 다음과 같은 속성이 있어, 뷰어의 외형과 동작을 사용자 지정할 수 있습니다:

  • fullScreen: 뷰어가 전체 화면 모드인지 여부를 나타냅니다.

  • mouseMode: 마우스 동작 방식을 나타냅니다.

  • viewMode: 문서 페이지를 표시하는 방법을 나타냅니다.

  • zoomFactor: 문서 페이지를 표시할 때 현재 확대 비율을 나타냅니다.

예제
pdfViewer.fullScreen = true;
pdfViewer.mouseMode = wijmo.viewer.MouseMode.MoveTool;
pdfViewer.viewMode = wijmo.viewer.zoomMode.WholePage;