테스트 사이트 - 개발 중인 베타 버전입니다

view 상태에서 현 읽고 있는 페이지를 새창으로 다시 불러올 수 있을까요? 채택완료

온비 9개월 전 조회 1,763

인쇄버튼을 추가하여 프린트를 하려고 하는데.. 

잘 안되어서.. 

 

네이버 기사를 보니까. 인쇄버튼을 누르면 해당페이지를 새창으로 띄워서 인쇄를 하더라구요.

 

한번 시도해 보려고 합니다. 

 

많은 지도 부탁드립니다.

 

http://sir.kr/data/editor/2501/1954516915_1737995040.8846.png" width="100%" />

 

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
glitter0gim
9개월 전

그누보드를 예로, 현재 보고 있는 페이지를 새 창으로 열고 인쇄 버튼을 구현하려면,

view.php와 HTML 템플릿 파일인 view.skin.php에 "새 창으로 열기 및 인쇄" 버튼을 추가하고,

테마에 맞는 CSS 스타일을 적용해야 하고,

코드의 재사용성을 높이기 위해 JavaScript 기능을 별도의 파일로 분리하여 관리하며,

모바일 환경에서도 동일한 기능을 제공하기 위해

/mobile/ 디렉토리의 관련 파일에 동일한 로직을 추가하시면 될 듯합니다.

 

*view.php, 게시글 뷰 페이지에서 "새 창으로 열기 및 인쇄" 버튼 추가.

echo '<button onclick="openPrintWindow()">인쇄</button>';

echo '<script>

function openPrintWindow() {

const printWindow = window.open(window.location.href, "_blank");

printWindow.onload = () => printWindow.print();

}

</script>';

테마에 따라 버튼을 디자인하고 추가.

  - /skin/board/basic/view.skin.php 파일을 활용하여 추가 가능.

// "새 창으로 열기 및 인쇄" 버튼 디자인 및 배치

<div class="print-btn-wrapper">

<button class="btn btn-print" onclick="openPrintWindow()">인쇄</button>

</div>

<script>

function openPrintWindow() {

const printWindow = window.open(window.location.href, "_blank");

printWindow.onload = () => printWindow.print();

}

</script>

 

// CSS 스타일 추가 (해당 테마의 style.css 파일)

.print-btn-wrapper {

margin-top: 20px;

text-align: right;

}

.btn-print {

padding: 10px 20px;

background-color: #007bff;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

}

.btn-print:hover {

background-color: #0056b3;

}

*코드의 재사용성을 높이기 위해 별도의 JavaScript 파일로 기능 분리.

/js/print.js

function openPrintWindow() {
    const printWindow = window.open(window.location.href, "_blank");
    printWindow.onload = () => printWindow.print();
}

view.php 또는 view.skin.php 파일에 스크립트 연결
echo '<script src="/js/print.js"></script>';
echo '<button onclick="openPrintWindow()">인쇄</button>';

*/mobile/ 디렉토리의 view.php 및 view.skin.php에도 동일한 기능 추가.

echo '<button onclick="openPrintWindow()">인쇄</button>';

echo '<script>

function openPrintWindow() {

const printWindow = window.open(window.location.href, "_blank");

printWindow.onload = () => printWindow.print();

}

</script>';

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

R
9개월 전

1. view.skin.php 파일에 프린트 버튼을 추가:

```php
<!-- 기존 버튼들이 있는 위치에 추가 -->
<button type="button" class="btn btn_print" onclick="open_print();">
    <i class="fa fa-print" aria-hidden="true"></i> 인쇄하기
</button>
```

2. 프린트용 새창을 열기 위한 JavaScript 함수를 추가:

```javascript
<script>
function open_print() {
    // 현재 게시글 URL에 프린트 파라미터 추가
    var print_url = window.location.href;
    if(print_url.indexOf('?') > -1) {
        print_url += '&print=1';
    } else {
        print_url += '?print=1';
    }
    
    // 새창 열기
    var print_win = window.open(print_url, "print_win", "left=0,top=0,width=800,height=900,scrollbars=1");
    print_win.focus();
}
</script>
```

3. 프린트용 페이지 레이아웃. board/view.php 파일 상단에 추가:

```php
if (isset($_GET['print']) && $_GET['print'] == '1') {
    // 프린트용 헤더
    include_once(G5_PATH.'/head.sub.php');
    
    // 프린트용 스타일 추가
    add_stylesheet('<style>
        @media print {
            .no-print { display: none; }
            body { padding: 20px; }
        }
        .print-header { margin-bottom: 20px; }
        .print-title { font-size: 24px; margin-bottom: 15px; }
        .print-info { margin-bottom: 20px; color: #666; }
        .print-content img { max-width: 100%; }
        .print-btn { text-align: center; margin: 20px 0; }
    </style>', 0);
    ?>
    
    <div class="print-wrap">
        <div class="print-header">
            <h1 class="print-title"><?php echo $view['wr_subject']; ?></h1>
            <div class="print-info">
                작성자: <?php echo $view['name']; ?> | 
                작성일: <?php echo date("Y-m-d H:i", strtotime($view['wr_datetime'])); ?> | 
                조회: <?php echo number_format($view['wr_hit']); ?>
            </div>
        </div>
        
        <div class="print-content">
            <?php echo get_view_thumbnail($view['content']); ?>
        </div>
        
        <div class="print-btn no-print">
            <button type="button" onclick="window.print();" class="btn btn-primary">인쇄하기</button>
            <button type="button" onclick="window.close();" class="btn btn-secondary">창닫기</button>
        </div>
    </div>
    
    <?php
    include_once(G5_PATH.'/tail.sub.php');
    exit;
}
```

4. 필요한 경우 프린트 스타일을 추가로 커스터마이징:

```css
@media print {
    /* 프린트시 배경색과 이미지 표시 */
    body { -webkit-print-color-adjust: exact !important; }
    
    /* 페이지 나눔 설정 */
    .print-content { page-break-inside: auto; }
    
    /* 머리글, 바닥글 제거 */
    @page { margin: 0.5cm; }
    
    /* 링크의 URL 표시 */
    a[href]:after { content: " (" attr(href) ")"; }
}
```

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

온비
9개월 전

답변감사합니다. 참고해서 열심히 해보겠습니다. 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

웅푸
9개월 전

뷰페이지에서 인쇄 버튼을넣고 인쇄 해야할 전체감싸는 요소만 지정해주면 됩니다.

따라서 뷰페이지에서 원하는 인쇄부분이 print-area 라고한다면?

버튼 넣고 <button onclick="printDiv('print-area')">인쇄</button>

<script> function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
 window.print();
document.body.innerHTML = originalContents;
}
</script>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인