답변 4개
그누보드를 예로, 현재 보고 있는 페이지를 새 창으로 열고 인쇄 버튼을 구현하려면,
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>';
댓글을 작성하려면 로그인이 필요합니다.
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) ")"; }
}
```
댓글을 작성하려면 로그인이 필요합니다.
뷰페이지에서 인쇄 버튼을넣고 인쇄 해야할 전체감싸는 요소만 지정해주면 됩니다.
따라서 뷰페이지에서 원하는 인쇄부분이 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>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인