Vue Print Preview

🖨️ 브라우저 인쇄 여백 문제를 해결하는 Vue 3 인쇄 미리보기 라이브러리

Vue Print Preview는 실제 인쇄물과 정확히 일치하는 미리보기를 제공하여 브라우저별 인쇄 여백 불일치 문제를 해결합니다.

📋 버전 정보

v2.0.2 (현재 버전)

• 🔧 정확한 높이 측정 오류 해결

v2.0.1

• 🔧 스타일 관련 오류 해결, 페이지 렌더링 타이밍 문제 해결
• 🔧 정확한 높이 측정 실패 오류 해결중

v2.0.0

주요 변경사항 (Breaking Changes):

• 🔄 컴포넌트 이름 변경: PrintPreviewScreen → <preview-pages>
• 🎨 Tailwind CSS 완전 지원: iframe 인쇄에서 Tailwind 클래스 자동 적용
• 📏 높이 측정 안정화: getBoundingClientRect() 기반 정밀 높이 계산
• 🔧 margin collapse 처리: 복잡한 CSS 레이아웃에서 정확한 페이지 분할

v1.0.0 - 2025년 8월 출시

• 🎯 기본 A4 인쇄 미리보기 기능
• 📄 다양한 용지 크기 지원 (A4, A3, B3, Letter)
• 📊 다단 컬럼 레이아웃 (1-3단)
• 🎨 헤더/푸터 시스템

✨ 주요 기능

• 🎯 정확한 인쇄 미리보기 - 실제 인쇄물과 100% 일치하는 화면 미리보기
• 🎨 Tailwind CSS 완전 지원 - CDN 자동 로딩으로 스타일 완벽 재현 (v2.0.0)
• 📏 정밀 높이 측정 - border, margin, box-shadow 포함 정확한 페이지 분할 (v2.0.0)
• 📄 다양한 용지 크기 - A4, A3, B3, Letter 프리셋 및 커스텀 크기 지원
• 📊 다단 컬럼 레이아웃 - 1-3단 컬럼 자동 분할 및 균등 배치
• 📑 자동 페이지 분할 - DOM 높이 기반 지능형 페이지 나누기
• 🎨 헤더/푸터 시스템 - 페이지별 헤더, 상단, 푸터 템플릿 지원
• 📱 반응형 스케일링 - 컨테이너 크기에 따른 실시간 크기 조정
• 🔧 TypeScript 지원 - 완전한 타입 안전성 보장

📦 설치

npm install vue-print-preview

🚀 빠른 시작

기본 사용법

<template>
  <preview-pages 
    preset="A4"
    :content="htmlContent"
  />
</template>

<script setup>
import { PreviewPages } from 'vue-print-preview'

const htmlContent = `
  <h1>제목</h1>
  <p>인쇄할 내용입니다.</p>
`
</script>

커스텀 여백 설정

<template>
  <preview-pages 
    preset="A4"
    :content="htmlContent"
    :custom-margins="{ 
      top: 25, 
      right: 20, 
      bottom: 25, 
      left: 20,
      columns: 2,
      columnGap: 15
    }"
  />
</template>

완전 커스텀 용지 설정

<template>
  <preview-pages 
    :paper-config="{
      width: 200,
      height: 280,
      margins: { top: 15, right: 10, bottom: 15, left: 10 },
      columns: 2,
      columnGap: 12,
      name: 'Custom Size'
    }"
    :content="htmlContent"
  />
</template>

헤더/푸터 사용

<template>
  <preview-pages 
    preset="A4"
    :content="htmlContent"
    :header="headerHTML"
    :page-top="pageTopHTML"
    :footer="footerHTML"
  />
</template>

<script setup>
const headerHTML = `
  <div style="text-align: center; border-bottom: 2px solid #333;">
    <h1>문서 제목</h1>
  </div>
`

const pageTopHTML = `
  <div style="text-align: right;">
    페이지 {{pageNumber}}/{{totalPages}}
  </div>
`

const footerHTML = `
  <div style="text-align: center;">
    © 2025 My Company
  </div>
`
</script>

📖 API 문서

Props

| 속성 | 타입 | 기본값 | 설명 | |------|------|--------|------| | preset | 'A4' \| 'A3' \| 'B3' \| 'LETTER' | 'A4' | 표준 용지 크기 프리셋 | | paperConfig | PaperConfig | - | 완전 커스텀 용지 설정 | | customMargins | CustomMargins | - | 프리셋 기반 부분 수정 | | content | string | - | 인쇄할 HTML 콘텐츠 | | header | string | - | 첫 페이지 헤더 HTML | | pageTop | string | - | 모든 페이지 상단 HTML | | footer | string | - | 모든 페이지 하단 HTML |

타입 정의

interface PaperConfig {
  width: number        // mm 단위
  height: number       // mm 단위
  margins: {
    top: number        // mm 단위
    right: number      // mm 단위
    bottom: number     // mm 단위
    left: number       // mm 단위
  }
  columns?: number     // 컬럼 수 (1-3)
  columnGap?: number   // mm 단위
  name?: string        // 용지 이름
}

interface CustomMargins {
  top?: number         // mm 단위
  right?: number       // mm 단위
  bottom?: number      // mm 단위
  left?: number        // mm 단위
  columns?: number     // 컬럼 수
  columnGap?: number   // mm 단위
}

🔍 고급 사용법

프로그래밍 방식 인쇄

<template>
  <preview-pages 
    ref="printRef"
    preset="A4"
    :content="content"
  />
  <button @click="handlePrint">인쇄하기</button>
</template>

<script setup>
import { ref } from 'vue'

const printRef = ref()

const handlePrint = () => {
  if (printRef.value) {
    printRef.value.printPreview()
  }
}
</script>

다단 컬럼 레이아웃

<template>
  <preview-pages 
    preset="A4"
    :custom-margins="{ 
      columns: 3,      // 3단 컬럼
      columnGap: 8     // 8mm 간격
    }"
    :content="columnContent"
  />
</template>

🎨 스타일링

모든 크기와 여백은 mm 단위로 통일되어 있어 인쇄물과 정확히 일치합니다.

/* 글로벌 CSS에서 사용자 정의 스타일 */
.print-page-wrapper {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.print-page {
  font-family: 'Noto Sans KR', sans-serif;
}

📋 사용 예시

시험지 레이아웃

<template>
  <preview-pages 
    preset="A4"
    :content="examContent"
    :header="examHeader"
    :footer="examFooter"
    :custom-margins="{ 
      top: 30, 
      columns: 2,
      columnGap: 15 
    }"
  />
</template>

<script setup>
const examHeader = `
  <div style="text-align: center; border-bottom: 2px solid #000;">
    <h1>2025학년도 모의시험</h1>
    <h2>수학 영역</h2>
  </div>
`

const examFooter = `
  <div style="text-align: right; font-size: 10pt;">
    페이지 {{pageNumber}} / {{totalPages}}
  </div>
`
</script>

💡 팁과 요령

1. mm 단위 사용: 모든 크기는 mm 단위로 설정하여 인쇄 정확도를 보장합니다.
2. 헤더/푸터 템플릿: {{pageNumber}}와 {{totalPages}} 변수를 사용할 수 있습니다.
3. 컬럼 최적화: 1-3단 컬럼을 지원하며, 컬럼 간격은 8-15mm가 권장됩니다.
4. 반응형 미리보기: 컨테이너 크기에 따라 자동으로 스케일이 조정됩니다.

🛠️ 시스템 요구사항

• Vue: 3.5.18+
• TypeScript: 5.7.2+ (선택사항)
• 브라우저: Chrome 90+, Firefox 88+, Safari 14+

📄 라이센스

이 소프트웨어는 독점 라이센스 하에 배포됩니다. 상업적 사용 및 재배포에 대한 자세한 내용은 개발자에게 문의하세요.

👨‍💻 개발자

hoonee-math

• 🌐 포트폴리오: https://hoonee-math.info
• 📧 문의: 포트폴리오 사이트를 통해 연락 가능

Vue Print Preview는 정확한 인쇄 미리보기를 통해 더 나은 사용자 경험을 제공합니다.

📖 문서 • 🐛 이슈 신고 • 💼 포트폴리오