뷰어 스타일
1.CSS 변수
라이브러리 CSS를 불러온 뒤, 아래 선택자에 같은 변수를 다시 선언하면 값이 덮어써집니다. 변수는 pdf-viewer와 .pdf-document에 정의되어 있으므로, :root가 아니라 그 선택자에 선언해야 적용됩니다.
1.1뷰어 컨테이너 (pdf-viewer)
| 변수 | 기본값 | 대상 |
|---|---|---|
--pdf-viewer-view-container-border | 1px solid gray | 뷰어 컨테이너 테두리 |
--pdf-viewer-view-container-background-color | #eee | 뷰어 컨테이너 배경 |
1.2페이지, 주석 (.pdf-document)
| 변수 | 기본값 | 대상 |
|---|---|---|
--pdf-page-outline | 1px solid #000 | 페이지 아웃라인 |
--pdf-page-border | 1px solid #000 | 페이지 테두리 |
--pdf-page-cursor | 'auto' | 페이지 커서 |
--pdf-annotation-pointer-events | auto | 리사이즈 중 주석의 포인터 이벤트 |
--pdf-annotation-resizer-size | 8px | 주석 리사이저(핸들) 크기 |
--pdf-annotation-resizer-position-size | -10px | 리사이저 위치 오프셋 |
CSS라이브러리 CSS 뒤에 선언
pdf-viewer {
--pdf-viewer-view-container-background-color: #fff;
}
.pdf-document {
--pdf-page-border: 1px solid #ccc;
--pdf-annotation-resizer-size: 10px;
}2.초기 배율 (zoomScale)
배율은 숫자면 viewer.zoomScale 대입으로, 키워드('fit-to-page-*', 'auto')는 viewer.document.setZoomScale(...)로 지정합니다.
| 값 | 동작 |
|---|---|
숫자 (예: 1, 1.5) | 배율 직접 지정 |
'fit-to-page-width' | 페이지 너비에 맞춤 (기본값) |
'fit-to-page-height' | 페이지 전체에 맞춤 |
'auto' | 페이지 방향에 따라 너비, 전체를 자동 선택 |
JS배율 설정
// 키워드는 setZoomScale, 숫자는 zoomScale 대입
viewer.document.setZoomScale('fit-to-page-height');
viewer.zoomScale = 1.5;