export function printGrid(gridData, columns) {
let tableHtml = `
<html>
<head>
<title>Print Grid</title>
<style>
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid black; padding: 8px; }
th { background-color: #f2f2f2; text-align: center; } /* 기본적으로 헤더는 중앙 정렬 */
</style>
</head>
<body>
<table>
<thead>
<tr>
${columns.map(col => `<th style="text-align: ${col.align || "left"}">${col.header}</th>`).join("")}
</tr>
</thead>
<tbody>
${gridData.map(row => `
<tr>
${columns.map(col => `
<td style="text-align: ${col.align || "left"}">${row[col.name] || ""}</td>
`).join("")}
</tr>
`).join("")}
</tbody>
</table>
<script>
window.onload = function() {
window.print();
window.onafterprint = function() { window.close(); }
};
</script>
</body>
</html>
`;
const newWindow = window.open("", "_blank");
newWindow.document.write(tableHtml);
newWindow.document.close();
}
-------------------------
function getHeaderRows(columns) {
const headerRows = [];
// 🔥 복합 헤더가 있는 경우
columns.forEach(col => {
if (col.childNames) {
headerRows.push({
header: col.header,
colspan: col.childNames.length
});
}
});
return headerRows.length > 0 ? [headerRows] : []; // 복합 헤더가 있으면 2단으로 표시
}
_____________________
export function printGrid(gridData, columns) {
const headerRows = getHeaderRows(columns); // 🔥 복합 헤더 정보 가져오기
let tableHtml = `
<html>
<head>
<title>Print Grid</title>
<style>
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid black; padding: 8px; }
th { background-color: #f2f2f2; text-align: center; }
</style>
</head>
<body>
<table>
<thead>
${headerRows.length > 0 ? `
<tr>
${headerRows[0].map(col => `
<th colspan="${col.colspan}" style="text-align: center;">${col.header}</th>
`).join("")}
</tr>
` : ""}
<tr>
${columns.map(col => `<th style="text-align: ${col.align || "left"}">${col.header}</th>`).join("")}
</tr>
</thead>
<tbody>
${gridData.map(row => `
<tr>
${columns.map(col => `
<td style="text-align: ${col.align || "left"}">${row[col.name] || ""}</td>
`).join("")}
</tr>
`).join("")}
</tbody>
</table>
<script>
window.onload = function() {
window.print();
window.onafterprint = function() { window.close(); }
};
</script>
</body>
</html>
`;
const newWindow = window.open("", "_blank");
newWindow.document.write(tableHtml);
newWindow.document.close();
}
________________
export function printGrid(gridData, columns) {
const headerRows = getHeaderRows(columns);
let tableHtml = `
<html>
<head>
<title>Print Grid</title>
<style>
/* 🔥 기본 테이블 스타일 */
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* ✅ 자동 크기 조정 */
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
word-wrap: break-word; /* ✅ 텍스트 줄바꿈 */
overflow: hidden; /* ✅ 넘치는 내용 숨김 */
}
th {
background-color: #f2f2f2;
text-align: center;
}
/* 🔥 프린트 전용 스타일 */
@media print {
body { margin: 0; padding: 0; }
table { page-break-inside: auto; }
tr { page-break-inside: avoid; page-break-after: auto; }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
.page { page-break-before: always; } /* ✅ 페이지 넘김 */
}
</style>
</head>
<body>
<table>
<thead>
${headerRows.length > 0 ? `
<tr>
${headerRows[0].map(col => `
<th colspan="${col.colspan}" style="text-align: center;">${col.header}</th>
`).join("")}
</tr>
` : ""}
<tr>
${columns.map(col => `<th style="text-align: ${col.align || "left"}">${col.header}</th>`).join("")}
</tr>
</thead>
<tbody>
${gridData.map(row => `
<tr>
${columns.map(col => `
<td style="text-align: ${col.align || "left"}">${row[col.name] || ""}</td>
`).join("")}
</tr>
`).join("")}
</tbody>
</table>
<script>
window.onload = function() {
window.print();
window.onafterprint = function() { window.close(); }
};
</script>
</body>
</html>
`;
const newWindow = window.open("", "_blank");
newWindow.document.write(tableHtml);
newWindow.document.close();
}
'STUDY' 카테고리의 다른 글
| 프로그래밍 언어 별 특성 차이점 (0) | 2023.02.23 |
|---|---|
| 국비지원 IT교육 취업 후기(중부기술교육원, 파이썬 빅데이터분석) (9) | 2023.01.05 |