[1268][1295] pdf 출력 세로->가로 혼합

src/main/java/com/interplug/qcast/biz/pwrGnrSimulation/PwrGnrSimService.java

@@ -2337,7 +2337,7 @@ public class PwrGnrSimService {
               .mapToInt(Integer::parseInt) // 정수로 변환
               .toArray();
 
-      int referenceValue = 300; // table 높이
+      int referenceValue = 250; // table 높이
       int orgMaxValue =
           Arrays.stream(onlyData)
               .max()
@@ -2426,9 +2426,11 @@ public class PwrGnrSimService {
     // 모듈 list
     if (data.getRoofModuleList() != null && data.getRoofModuleList().size() > 0) {
       sb = new StringBuilder();
-
+        int totCnt = 0;
       for (int i = 0; i < data.getRoofModuleList().size(); i++) {
         PwrGnrSimRoofResponse listItem = data.getRoofModuleList().get(i);
+        String tot = StringUtils.defaultString(listItem.getAmount());
+        totCnt += Integer.parseInt(tot);
         sb.append("<tr>");
         sb.append("<td>" + StringUtils.defaultString(listItem.getRoofSurface()) + "</td>");
         sb.append("<td>" + StringUtils.defaultString(listItem.getSlopeAngleTxt()) + "</td>");
@@ -2437,6 +2439,10 @@ public class PwrGnrSimService {
         sb.append("<td>" + StringUtils.defaultString(listItem.getAmount()) + "</td>");
         sb.append("</tr>");
       }
+        sb.append("<tr>");
+        sb.append("<th colspan=4 >合計</th>");
+        sb.append("<td>" + StringUtils.defaultString(String.valueOf(totCnt)) + "</td>");
+        sb.append("</tr>");
 
       elm = doc.getElementById("roofModuleList_detail");
       elm.append(sb.toString());
@@ -2461,7 +2467,7 @@ public class PwrGnrSimService {
 
     elm = doc.getElementById("guideInfo");
     elm.append(data.getGuideInfo());
-
+    //log.debug("pwrGnrSimPdfHtml ::: {}", doc);
     return doc;
   }
 

src/main/java/com/interplug/qcast/util/PdfUtil.java

@@ -53,17 +53,124 @@ public class PdfUtil {
     return doc;
   }
 
+
   /**
-   * PDF 다운로드
+   * PDF 다운로드 (섹션별 방향 설정 지원)
    *
    * @param request
    * @param response
    * @param doc
    * @param pdfFileName 파일명
    * @param arrSection 노출 Section
-   * @param isLandscape 가로/세로 설정
+   * @param isLandscape 가로/세로 설정 (기본값)
+   * @param sectionOrientation 섹션별 방향 설정 (선택사항)
    * @throws IOException
    */
+  public static void pdfDownload(
+      HttpServletRequest request,
+      HttpServletResponse response,
+      Document doc,
+      String pdfFileName,
+      String[] arrSection,
+      boolean isLandscape,
+      java.util.Map<String, Boolean> sectionOrientation)
+      throws IOException {
+
+    // 가로 세로 설정
+    com.itextpdf.kernel.geom.PageSize pageSize = isLandscape ? com.itextpdf.kernel.geom.PageSize.A4.rotate() : com.itextpdf.kernel.geom.PageSize.A4;
+
+    // 응답에 PDF 설정
+    response.setContentType("application/pdf");
+    response.setHeader("Content-Disposition", "attachment; filename=\"" + pdfFileName + "\".pdf");
+    response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");
+
+    try (java.io.OutputStream os = response.getOutputStream();
+        com.itextpdf.kernel.pdf.PdfWriter writer = new com.itextpdf.kernel.pdf.PdfWriter(os);
+        com.itextpdf.kernel.pdf.PdfDocument pdfDoc = new com.itextpdf.kernel.pdf.PdfDocument(writer)) {
+
+      pdfDoc.setDefaultPageSize(pageSize);
+
+      // 폰트 설정
+      ConverterProperties properties = new ConverterProperties();
+      String fontPath = "template/pdf/BIZUDPGothic-Regular.ttf";
+      properties.setFontProvider(setFontProvider(fontPath));
+
+      // arrSection이 비어 있는 경우 HTML 전체를 변환
+      if (arrSection == null || arrSection.length == 0) {
+        // HTML 전체를 pdfDoc에 직접 변환
+        HtmlConverter.convertToPdf(
+            new java.io.ByteArrayInputStream(doc.html().getBytes(StandardCharsets.UTF_8)),
+            pdfDoc,
+            properties);
+        os.flush();
+      } else {
+        // arrSection이 있는 경우 각 섹션을 개별적으로 변환 후 병합
+        String headHtml = doc.select("head").outerHtml();
+
+        com.itextpdf.kernel.utils.PdfMerger merger = new com.itextpdf.kernel.utils.PdfMerger(pdfDoc);
+        for (String section : arrSection) {
+          if (section != null && !"".equals(section)) {
+            Elements eSections = doc.select(section);
+            if (eSections != null && eSections.size() > 0) {
+              for (Element eSection : eSections) {
+
+                // 섹션별 방향 설정 확인
+                boolean sectionIsLandscape = isLandscape; // 기본값
+                if (sectionOrientation != null && sectionOrientation.containsKey(section)) {
+                  sectionIsLandscape = sectionOrientation.get(section);
+                }
+
+                // 가로 섹션인 경우 @page CSS를 landscape로 변경
+                String sectionHeadHtml = headHtml;
+                if (sectionIsLandscape) {
+                  sectionHeadHtml = sectionHeadHtml.replaceAll(
+                      "@page\\s*\\{[^}]*\\}",
+                      "@page { size: A4 landscape; margin: 10mm 12mm; }");
+                }
+
+                String sectionHtml =
+                    "<html>" + sectionHeadHtml + "<body>" + eSection.outerHtml() + "</body></html>";
+
+                // 섹션별 페이지 크기 설정
+                com.itextpdf.kernel.geom.PageSize sectionPageSize = sectionIsLandscape ? com.itextpdf.kernel.geom.PageSize.A4.rotate() : com.itextpdf.kernel.geom.PageSize.A4;
+
+                try (java.io.ByteArrayOutputStream tempOutputStream = new java.io.ByteArrayOutputStream();
+                    com.itextpdf.kernel.pdf.PdfWriter tempWriter = new com.itextpdf.kernel.pdf.PdfWriter(tempOutputStream);
+                    com.itextpdf.kernel.pdf.PdfDocument tempPdfDoc = new com.itextpdf.kernel.pdf.PdfDocument(tempWriter)) {
+
+                  tempPdfDoc.setDefaultPageSize(sectionPageSize);
+
+                  HtmlConverter.convertToPdf(
+                      new java.io.ByteArrayInputStream(sectionHtml.getBytes(StandardCharsets.UTF_8)),
+                      tempPdfDoc,
+                      properties);
+
+                  com.itextpdf.kernel.pdf.PdfDocument tempDoc =
+                      new com.itextpdf.kernel.pdf.PdfDocument(
+                          new com.itextpdf.kernel.pdf.PdfReader(new java.io.ByteArrayInputStream(tempOutputStream.toByteArray())));
+                  merger.merge(tempDoc, 1, tempDoc.getNumberOfPages());
+                  tempDoc.close();
+
+                  if (!eSection.equals(eSections.last())) {
+                    pdfDoc.addNewPage();
+                  }
+                }
+              }
+            }
+          }
+        }
+        pdfDoc.close();
+        os.flush();
+      }
+    } catch (Exception e) {
+      log.error("PDF 생성 중 오류 발생: " + e.getMessage(), e);
+      if (!response.isCommitted()) {
+        response.reset();
+        response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR, "PDF 생성 중 오류가 발생했습니다.");
+      }
+    }
+  }
+
   public static void pdfDownload(
       HttpServletRequest request,
       HttpServletResponse response,

src/main/resources/template/pdf/pdf_download_quotation_detail_template.html

@@ -1,9 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="ja">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
     <style>
-        @page { size: A4; margin: 10mm 12mm; }
+      /* @page { size: A4 landscape; margin: 10mm 12mm; } */
-        .section1, .section2, .section3 .section4 .section5 .section6{
+      .section1, .section2, .section3, .section4, .section5, .section6{
           page-break-before: always;
           page-break-after: always;
           page-break-inside: avoid;
@@ -11,7 +14,6 @@
           /* 실제 출력 높이: 297mm - 20mm = 277mm */
           max-height: 277mm;
           overflow: hidden;
-
           padding: 5mm;
       }
       .section:first-child { page-break-before: auto; }
@@ -72,10 +74,6 @@
           width: 15%
       }
 
-        body {
-            max-width: 740px;
-            margin: 0 auto
-        }
 
       .mb20 {
           margin-bottom: 20px
@@ -115,8 +113,8 @@
       .chart-wrapper {
           width: 100%;
           table-layout: fixed;
-            margin: 30px 0;
+          margin: 10px 0;
-            height: 324.3px
+          height: 279.3px
       }
 
       .chart-wrapper td {
@@ -136,7 +134,7 @@
           font-size: 10px;
           line-height: 1;
           vertical-align: bottom;
-            padding: 12.3px 0
+          padding: 10.3px 0
       }
 
       .y-axis td.zero {
@@ -169,7 +167,7 @@
 
       .chart-line td {
           background-color: transparent;
-            padding: 18.2px 0;
+          padding: 15.2px 0;
           border-bottom: 1px solid #ddd !important
       }
 
@@ -389,6 +387,15 @@
           text-align: center;
           font-size: 8px;
       }
+      .section1, .section2, .section6{
+        max-width: 740px;
+        margin: 0 auto;
+      }
+      .section3, .section4, .section5 {
+          max-width: 1040px;
+          margin: 0 auto;
+      }
+
       
   </style>
 </head>
@@ -483,13 +490,13 @@
     <table class="price-table mb10">
         <thead>
         <tr>
-            <th style="width: 60px;">No</th>
+            <th style="width: 50px;">No</th>
             <th>品名</th>
-            <th style="width: 80px;">型番</th>
+            <th style="width: 130px;">型番</th>
-            <th style="width: 80px;">単価</th>
+            <th style="width: 70px;">単価</th>
-            <th style="width: 60px;">数量</th>
+            <th style="width: 50px;">数量</th>
-            <th style="width: 80px;">単位</th>
+            <th style="width: 60px;">単位</th>
-            <th style="width: 110px;">価格</th>
+            <th style="width: 80px;">価格</th>
         </tr>
         </thead>
         <tbody id="itemList_detail">
@@ -564,28 +571,15 @@
             <th class="col-15">作成日</th>
             <td id="drawingEstimateCreateDate"></td>
         </tr>
-        <tr>
+
-            <th class="col-15">都道府県</th>
-            <td id="prefName"></td>
-            <th class="col-15">日射量観測地点</th>
-            <td id="areaName"></td>
-        </tr>
-        <tr>
-            <th class="col-15">システム容量</th>
-            <td id="capacity"></td>
-            <th class="col-15">年間予測発電量</th>
-            <td id="anlFrcsGnrt"></td>
-        </tr>
-        <tr>
-            <th class="col-15">積雪条件</th>
-            <td id="snowfall"></td>
-            <th class="col-15">風速条件</th>
-            <td id="standardWindSpeedId"></td>
-        </tr>
         </tbody>
     </table>
+    <table >
+        <tbody>
+        <tr>
+        <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
             <div id="pwrGnrChartImg">
-        <table class="chart-wrapper">
+                <table class="chart-wrapper" style="margin-top: 0;">
                     <tbody>
                     <tr id="htmlX">
                         <td class="y-axis-wrap">
@@ -614,7 +608,7 @@
                     </tbody>
                 </table>
             </div>
-    <div>
+            <div style="text-align: left; margin-bottom: 5px;">
                 ● 予測発電量［kWh］
             </div>
 
@@ -641,7 +635,35 @@
                 </tr>
                 </tbody>
             </table>
-
+            <div style="margin-bottom: 5px; text-align: left;">
+                ● Hanwha Japan 年間発電量シミュレーション案内事項
+            </div>
+            <div class="guide-box">
+                <pre class="guide-content" id="guideInfo">
+                </pre>
+            </div>
+        </td>
+        <td style="width: 40%; border: none; vertical-align: top; ">
+            <table class="mb20">
+                <tbody>
+                <tr>
+                    <th style="width: 100px;">システム容量</th>
+                    <td colspan="3" id="capacity"></td>
+                </tr>
+                <tr>
+                    <th style="width: 100px;">年間予測発電量</th>
+                    <td id="anlFrcsGnrt"></td>
+                    <th style="width: 100px;">都道府県</th>
+                    <td id="prefName"></td>
+                </tr>
+                <tr>
+                    <th style="width: 100px;">日射量観測地点</th>
+                    <td id="areaName"></td>
+                    <th style="width: 100px;">積雪量</th>
+                    <td id="snowfall"></td>
+                </tr>
+                </tbody>
+            </table>
             <table class="mb20">
                 <thead>
                 <tr>
@@ -665,13 +687,10 @@
                 <tbody id="pcsList_detail">
                 </tbody>
             </table>
-    <div>
+        </td>
-        ● Hanwha Japan 年間発電量シミュレーション案内事項
+        </tr>
-    </div>
+        </tbody>
-    <div class="guide-box">
+    </table>
-        <pre class="guide-content" id="guideInfo">
-        </pre>
-    </div>
 </div>
 <div class="section4">
   <table class="mb20">
@@ -705,58 +724,19 @@
       </tbody>
   </table>
 
-    <div class="guide-box">
+  <table>
+    <tbody>
+      <tr>
+        <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
+          <div class="guide-box mb20">
             <div class="guide-image"  id="degImg1">
             </div>
 
             <div class="guide-content" id="drawingImg1">
-
             </div>
           </div>
-
-    <table class="mb20">
-        <thead>
-        <tr>
-            <th class="col-15">No</th>
-            <th>部材名</th>
-            <th class="col-15">数量</th>
-        </tr>
-        </thead>
-        <tbody id="notStandItemList_detail">
-        </tbody>
-    </table>
-
-    <table class="mb20">
-        <thead>
-        <tr>
-            <th class="col-15">No</th>
-            <th>パワーコンディショナ型式</th>
-        </tr>
-        </thead>
-        <tbody id="pcsItemList_detail">
-        </tbody>
-    </table>
-
-    <table class="price-table mb20">
-        <thead>
-        <tr>
-            <th class="col-15">屋根面</th>
-            <th>勾配</th>
-            <th>設置枚数</th>
-            <th>容量(kW)</th>
-        </tr>
-        </thead>
-        <tbody id="surFaceList_detail">
-        <tr>
-            <th class="end" colspan="2">合計</th>
-            <td id="moduleTotAmount"></td>
-            <td class="al-r" id="moduleTotVolKw"></td>
-        </tr>
-        </tbody>
-    </table>
-
           <div class="guide-box">
-        <pre class="guide-content">
+            <pre class="guide-content" style="text-align: left;">
                 ■注意事項
                 　・本図面は見積作成の為、太陽電池モジュールの配列及び枚数、架台のレールの種類数量、
                 　　および、支持点数を示すものであり、実際の施工においては、現地調査で支持点の位置を確認し、
@@ -787,6 +767,52 @@
             <tbody id="surFaceList_detail2">
             </tbody>
         </table>
+        </td>
+        <td style="width: 40%; border: none; vertical-align: top; ">
+          <table class="mb20">
+            <thead>
+            <tr>
+                <th class="col-15">No</th>
+                <th>部材名</th>
+                <th class="col-15">数量</th>
+            </tr>
+            </thead>
+            <tbody id="notStandItemList_detail">
+            </tbody>
+        </table>
+
+        <table class="mb20">
+            <thead>
+            <tr>
+                <th class="col-15">No</th>
+                <th>パワーコンディショナ型式</th>
+            </tr>
+            </thead>
+            <tbody id="pcsItemList_detail">
+            </tbody>
+        </table>
+
+        <table class="price-table ">
+            <thead>
+            <tr>
+                <th class="col-15">屋根面</th>
+                <th>勾配</th>
+                <th>設置枚数</th>
+                <th>容量(kW)</th>
+            </tr>
+            </thead>
+            <tbody id="surFaceList_detail">
+            <tr>
+                <th class="end" colspan="2">合計</th>
+                <td id="moduleTotAmount">ss</td>
+                <td class="al-r" id="moduleTotVolKw">ss</td>
+            </tr>
+            </tbody>
+        </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 <div class="section5">
   <table class="mb20">
@@ -820,27 +846,18 @@
       </tbody>
   </table>
 
-    <div class="guide-box">
+  <table>
+    <tbody>
+      <tr>
+        <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
+          <div class="guide-box mb20">
             <div class="guide-image" id="degImg2">
             </div>
             <div class="guide-content" id="drawingImg2">
             </div>
           </div>
-
-    <table class="mb20">
-		<thead>
-		<tr>
-            <th class="col-15">No</th>
-            <th class="col-15">部材名</th>
-            <th class="col-15">数量</th>
-        </tr>
-		</thead>
-        <tbody id="standItemList_detail">
-        </tbody>
-    </table>
-
           <div class="guide-box">
-        <pre class="guide-content">
+            <pre class="guide-content" style="text-align: left;">
                 ■注意事項
                 　・本図面は見積作成の為、太陽電池モジュールの配列及び枚数、架台のレールの種類数量、
                 　　および、支持点数を示すものであり、実際の施工においては、現地調査で支持点の位置を確認し、
@@ -869,10 +886,25 @@
             </tr>
             </thead>
             <tbody id="roofList_detail">
+            </tbody>
+        </table>
+        </td>
+        <td style="width: 40%; border: none; vertical-align: top; ">
+          <table class="mb20">
+            <thead>
+              <tr>
+                <th class="col-15">No</th>
+                <th >部材名</th>
+                <th class="col-15">数量</th>
+              </tr>
+            </thead>
+                <tbody id="standItemList_detail">
+                </tbody>
+            </table>
+        </td>
       </tr>
     </tbody>
   </table>
-
 </div>
 <div class="section6">
     <!--    <h1 class="title">重量算出シート</h1>-->

src/main/resources/template/pdf/pdf_download_quotation_detail_template2.html

@@ -1,9 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="ja">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
     <style>
-        @page { size: A4; margin: 10mm 12mm; }
+        /* @page { size: A4 landscape; margin: 10mm 12mm; } */
-        .section1, .section2, .section3 .section4 .section5 .section6{
+        .section1, .section2, .section3, .section4, .section5, .section6{
             page-break-before: always;
             page-break-after: always;
             page-break-inside: avoid;
@@ -11,7 +14,6 @@
             /* 실제 출력 높이: 297mm - 20mm = 277mm */
             max-height: 277mm;
             overflow: hidden;
-
             padding: 5mm;
         }
         .section:first-child { page-break-before: auto; }
@@ -72,10 +74,6 @@
             width: 15%
         }
 
-        body {
-            max-width: 740px;
-            margin: 0 auto
-        }
 
         .mb20 {
             margin-bottom: 20px
@@ -115,8 +113,8 @@
         .chart-wrapper {
             width: 100%;
             table-layout: fixed;
-            margin: 30px 0;
+            margin: 10px 0;
-            height: 324.3px
+            height: 279.3px
         }
 
         .chart-wrapper td {
@@ -136,7 +134,7 @@
             font-size: 10px;
             line-height: 1;
             vertical-align: bottom;
-            padding: 12.3px 0
+            padding: 10.3px 0
         }
 
         .y-axis td.zero {
@@ -169,7 +167,7 @@
 
         .chart-line td {
             background-color: transparent;
-            padding: 18.2px 0;
+            padding: 15.2px 0;
             border-bottom: 1px solid #ddd !important
         }
 
@@ -389,6 +387,14 @@
             text-align: center;
             font-size: 8px;
         }
+        .section1, .section2, .section6{
+            max-width: 740px;
+            margin: 0 auto;
+        }
+        .section3, .section4, .section5 {
+            max-width: 1040px;
+            margin: 0 auto;
+        }
 
         .hide-column {
             display: none;
@@ -487,13 +493,13 @@
     <table class="price-table mb10">
         <thead>
         <tr>
-            <th style="width: 60px;">No</th>
+            <th style="width: 50px;">No</th>
             <th>品名</th>
-            <th style="width: 80px;">型番</th>
+            <th style="width: 130px;">型番</th>
-            <th style="width: 80px;">単価</th>
+            <th style="width: 70px;">単価</th>
-            <th style="width: 60px;">数量</th>
+            <th style="width: 50px;">数量</th>
-            <th style="width: 80px;">単位</th>
+            <th style="width: 60px;">単位</th>
-            <th style="width: 110px;">価格</th>
+            <th style="width: 80px;">価格</th>
         </tr>
         </thead>
         <tbody id="itemList_detail">
@@ -568,28 +574,15 @@
             <th class="col-15">作成日</th>
             <td id="drawingEstimateCreateDate"></td>
         </tr>
-        <tr>
+
-            <th class="col-15">都道府県</th>
-            <td id="prefName"></td>
-            <th class="col-15">日射量観測地点</th>
-            <td id="areaName"></td>
-        </tr>
-        <tr>
-            <th class="col-15">システム容量</th>
-            <td id="capacity"></td>
-            <th class="col-15">年間予測発電量</th>
-            <td id="anlFrcsGnrt"></td>
-        </tr>
-        <tr>
-            <th class="col-15">積雪条件</th>
-            <td id="snowfall"></td>
-            <th class="col-15">風速条件</th>
-            <td id="standardWindSpeedId"></td>
-        </tr>
         </tbody>
     </table>
+    <table >
+        <tbody>
+        <tr>
+            <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
                 <div id="pwrGnrChartImg">
-        <table class="chart-wrapper">
+                    <table class="chart-wrapper" style="margin-top: 0;">
                         <tbody>
                         <tr id="htmlX">
                             <td class="y-axis-wrap">
@@ -618,7 +611,7 @@
                         </tbody>
                     </table>
                 </div>
-    <div>
+                <div style="text-align: left; margin-bottom: 5px;">
                     ● 予測発電量［kWh］
                 </div>
 
@@ -645,7 +638,35 @@
                     </tr>
                     </tbody>
                 </table>
-
+                <div style="margin-bottom: 5px; text-align: left;">
+                    ● Hanwha Japan 年間発電量シミュレーション案内事項
+                </div>
+                <div class="guide-box">
+                <pre class="guide-content" id="guideInfo">
+                </pre>
+                </div>
+            </td>
+            <td style="width: 40%; border: none; vertical-align: top; ">
+                <table class="mb20">
+                    <tbody>
+                    <tr>
+                        <th style="width: 100px;">システム容量</th>
+                        <td colspan="3" id="capacity"></td>
+                    </tr>
+                    <tr>
+                        <th style="width: 100px;">年間予測発電量</th>
+                        <td id="anlFrcsGnrt"></td>
+                        <th style="width: 100px;">都道府県</th>
+                        <td id="prefName"></td>
+                    </tr>
+                    <tr>
+                        <th style="width: 100px;">日射量観測地点</th>
+                        <td id="areaName"></td>
+                        <th style="width: 100px;">積雪量</th>
+                        <td id="snowfall"></td>
+                    </tr>
+                    </tbody>
+                </table>
                 <table class="mb20">
                     <thead>
                     <tr>
@@ -669,13 +690,10 @@
                     <tbody id="pcsList_detail">
                     </tbody>
                 </table>
-    <div>
+            </td>
-        ● Hanwha Japan 年間発電量シミュレーション案内事項
+        </tr>
-    </div>
+        </tbody>
-    <div class="guide-box">
+    </table>
-        <pre class="guide-content" id="guideInfo">
-        </pre>
-    </div>
 </div>
 <div class="section4">
     <table class="mb20">
@@ -709,58 +727,19 @@
         </tbody>
     </table>
 
-    <div class="guide-box">
+    <table>
+        <tbody>
+        <tr>
+            <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
+                <div class="guide-box mb20">
                     <div class="guide-image"  id="degImg1">
                     </div>
 
                     <div class="guide-content" id="drawingImg1">
-
                     </div>
                 </div>
-
-    <table class="mb20">
-        <thead>
-        <tr>
-            <th class="col-15">No</th>
-            <th>部材名</th>
-            <th class="col-15">数量</th>
-        </tr>
-        </thead>
-        <tbody id="notStandItemList_detail">
-        </tbody>
-    </table>
-
-    <table class="mb20">
-        <thead>
-        <tr>
-            <th class="col-15">No</th>
-            <th>パワーコンディショナ型式</th>
-        </tr>
-        </thead>
-        <tbody id="pcsItemList_detail">
-        </tbody>
-    </table>
-
-    <table class="price-table mb20">
-        <thead>
-        <tr>
-            <th class="col-15">屋根面</th>
-            <th>勾配</th>
-            <th>設置枚数</th>
-            <th>容量(kW)</th>
-        </tr>
-        </thead>
-        <tbody id="surFaceList_detail">
-        <tr>
-            <th class="end" colspan="2">合計</th>
-            <td id="moduleTotAmount"></td>
-            <td class="al-r" id="moduleTotVolKw"></td>
-        </tr>
-        </tbody>
-    </table>
-
                 <div class="guide-box">
-        <pre class="guide-content">
+            <pre class="guide-content" style="text-align: left;">
                 ■注意事項
                 　・本図面は見積作成の為、太陽電池モジュールの配列及び枚数、架台のレールの種類数量、
                 　　および、支持点数を示すものであり、実際の施工においては、現地調査で支持点の位置を確認し、
@@ -791,6 +770,52 @@
                     <tbody id="surFaceList_detail2">
                     </tbody>
                 </table>
+            </td>
+            <td style="width: 40%; border: none; vertical-align: top; ">
+                <table class="mb20">
+                    <thead>
+                    <tr>
+                        <th class="col-15">No</th>
+                        <th>部材名</th>
+                        <th class="col-15">数量</th>
+                    </tr>
+                    </thead>
+                    <tbody id="notStandItemList_detail">
+                    </tbody>
+                </table>
+
+                <table class="mb20">
+                    <thead>
+                    <tr>
+                        <th class="col-15">No</th>
+                        <th>パワーコンディショナ型式</th>
+                    </tr>
+                    </thead>
+                    <tbody id="pcsItemList_detail">
+                    </tbody>
+                </table>
+
+                <table class="price-table ">
+                    <thead>
+                    <tr>
+                        <th class="col-15">屋根面</th>
+                        <th>勾配</th>
+                        <th>設置枚数</th>
+                        <th>容量(kW)</th>
+                    </tr>
+                    </thead>
+                    <tbody id="surFaceList_detail">
+                    <tr>
+                        <th class="end" colspan="2">合計</th>
+                        <td id="moduleTotAmount">ss</td>
+                        <td class="al-r" id="moduleTotVolKw">ss</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </td>
+        </tr>
+        </tbody>
+    </table>
 </div>
 <div class="section5">
     <table class="mb20">
@@ -824,27 +849,18 @@
         </tbody>
     </table>
 
-    <div class="guide-box">
+    <table>
+        <tbody>
+        <tr>
+            <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
+                <div class="guide-box mb20">
                     <div class="guide-image" id="degImg2">
                     </div>
                     <div class="guide-content" id="drawingImg2">
                     </div>
                 </div>
-
-    <table class="mb20">
-        <thead>
-        <tr>
-            <th class="col-15">No</th>
-            <th class="col-15">部材名</th>
-            <th class="col-15">数量</th>
-        </tr>
-        </thead>
-        <tbody id="standItemList_detail">
-        </tbody>
-    </table>
-
                 <div class="guide-box">
-        <pre class="guide-content">
+            <pre class="guide-content" style="text-align: left;">
                 ■注意事項
                 　・本図面は見積作成の為、太陽電池モジュールの配列及び枚数、架台のレールの種類数量、
                 　　および、支持点数を示すものであり、実際の施工においては、現地調査で支持点の位置を確認し、
@@ -873,10 +889,25 @@
                     </tr>
                     </thead>
                     <tbody id="roofList_detail">
+                    </tbody>
+                </table>
+            </td>
+            <td style="width: 40%; border: none; vertical-align: top; ">
+                <table class="mb20">
+                    <thead>
+                    <tr>
+                        <th class="col-15">No</th>
+                        <th >部材名</th>
+                        <th class="col-15">数量</th>
+                    </tr>
+                    </thead>
+                    <tbody id="standItemList_detail">
+                    </tbody>
+                </table>
+            </td>
         </tr>
         </tbody>
     </table>
-
 </div>
 <div class="section6">
     <!--    <h1 class="title">重量算出シート</h1>-->

src/main/resources/template/pdf/pdf_download_simulation_detail_template.html

@@ -1,9 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="ja">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
     <style>
-        @page { size: A4; margin: 10mm 12mm; }
+        /* @page { size: A4 landscape; margin: 10mm 12mm; } */
-        .section3 {
+        .section1, .section2, .section3, .section4, .section5, .section6{
             page-break-before: always;
             page-break-after: always;
             page-break-inside: avoid;
@@ -11,7 +14,6 @@
             /* 실제 출력 높이: 297mm - 20mm = 277mm */
             max-height: 277mm;
             overflow: hidden;
-
             padding: 5mm;
         }
         .section:first-child { page-break-before: auto; }
@@ -22,6 +24,10 @@
             }
         }
 
+
+        /*.section:first-child {*/
+        /*    page-break-before: auto;*/
+        /*}*/
         body {
             margin: 0;
             padding: 0;
@@ -68,10 +74,6 @@
             width: 15%
         }
 
-        body {
-            max-width: 740px;
-            margin: 0 auto
-        }
 
         .mb20 {
             margin-bottom: 20px
@@ -111,8 +113,8 @@
         .chart-wrapper {
             width: 100%;
             table-layout: fixed;
-            margin: 30px 0;
+            margin: 10px 0;
-            height: 324.3px
+            height: 279.3px
         }
 
         .chart-wrapper td {
@@ -132,7 +134,7 @@
             font-size: 10px;
             line-height: 1;
             vertical-align: bottom;
-            padding: 12.3px 0
+            padding: 10.3px 0
         }
 
         .y-axis td.zero {
@@ -165,7 +167,7 @@
 
         .chart-line td {
             background-color: transparent;
-            padding: 18.2px 0;
+            padding: 15.2px 0;
             border-bottom: 1px solid #ddd !important
         }
 
@@ -385,128 +387,19 @@
             text-align: center;
             font-size: 8px;
         }
+        .section1, .section2, .section6{
+            max-width: 740px;
+            margin: 0 auto;
+        }
+        .section3, .section4, .section5 {
+            max-width: 1040px;
+            margin: 0 auto;
+        }
+
 
     </style>
 </head>
 <body>
-<!--<div class="section3">-->
-<!--    <table class="mb20">-->
-<!--        <tbody>-->
-<!--        <tr>-->
-<!--            <th class="col-10">物件番号</th>-->
-<!--            <td id="objectNo"></td>-->
-<!--            <th class="col-10">作成日</th>-->
-<!--            <td class="col-13" id="drawingEstimateCreateDate"></td>-->
-<!--            <th class="col-10">都道府県</th>-->
-<!--            <td class="col-13" id="prefName"></td>-->
-<!--            <th class="col-10">日射量観測地点</th>-->
-<!--            <td class="col-13" id="areaName"></td>-->
-<!--        </tr>-->
-<!--        <tr>-->
-<!--            <th class="col-10">システム容量</th>-->
-<!--            <td id="capacity"></td>-->
-<!--            <th class="col-10">年間予測発電量</th>-->
-<!--            <td id="anlFrcsGnrt"></td>-->
-<!--            <th class="col-10">積雪条件</th>-->
-<!--            <td id="snowfall"></td>-->
-<!--            <th class="col-10">風速条件</th>-->
-<!--            <td id="standardWindSpeedId"></td>-->
-<!--        </tr>-->
-<!--        </tbody>-->
-<!--    </table>-->
-<!--    <div class="chart-wrap">-->
-<!--        <div class="left-side">-->
-<!--            <div id="pwrGnrChartImg">-->
-<!--                <table class="chart-wrapper">-->
-<!--                    <tbody>-->
-<!--                    <tr id="htmlX">-->
-<!--                        <td class="y-axis-wrap">-->
-<!--                            <table class="y-axis">-->
-<!--                                <tbody id="htmlY">-->
-<!--                                </tbody>-->
-<!--                            </table>-->
-<!--                        </td>-->
-<!--                    </tr>-->
-<!--                    <tr>-->
-<!--                        <td class="month-cell"></td>-->
-<!--                        <td class="month-cell">1月</td>-->
-<!--                        <td class="month-cell">2月</td>-->
-<!--                        <td class="month-cell">3月</td>-->
-<!--                        <td class="month-cell">4月</td>-->
-<!--                        <td class="month-cell">5月</td>-->
-<!--                        <td class="month-cell">6月</td>-->
-<!--                        <td class="month-cell">7月</td>-->
-<!--                        <td class="month-cell">8月</td>-->
-<!--                        <td class="month-cell">9月</td>-->
-<!--                        <td class="month-cell">10月</td>-->
-<!--                        <td class="month-cell">11月</td>-->
-<!--                        <td class="month-cell">12月</td>-->
-<!--                    </tr>-->
-<!--                    </tbody>-->
-<!--                </table>-->
-<!--            </div>-->
-
-<!--            <div class="tit">-->
-<!--                ● 予測発電量［kWh］-->
-<!--            </div>-->
-<!--            <table class="mb20 month-table">-->
-<!--                <thead>-->
-<!--                <tr>-->
-<!--                    <th>1月</th>-->
-<!--                    <th>2月</th>-->
-<!--                    <th>3月</th>-->
-<!--                    <th>4月</th>-->
-<!--                    <th>5月</th>-->
-<!--                    <th>6月</th>-->
-<!--                    <th>7月</th>-->
-<!--                    <th>8月</th>-->
-<!--                    <th>9月</th>-->
-<!--                    <th>10月</th>-->
-<!--                    <th>11月</th>-->
-<!--                    <th>12月</th>-->
-<!--                    <th>合計</th>-->
-<!--                </tr>-->
-<!--                </thead>-->
-<!--                <tbody>-->
-<!--                <tr id="frcPwrGnrList_detail">-->
-<!--                </tr>-->
-<!--                </tbody>-->
-<!--            </table>-->
-<!--        </div>-->
-
-<!--        <div class="right-side">-->
-<!--            <table class="mb20">-->
-<!--                <thead>-->
-<!--                <tr>-->
-<!--                    <th class="col-15">屋根面</th>-->
-<!--                    <th class="col-15">傾斜角度</th>-->
-<!--                    <th class="col-15">方位角(度)</th>-->
-<!--                    <th>太陽電池モジュール</th>-->
-<!--                    <th class="col-15">枚数(枚)</th>-->
-<!--                </tr>-->
-<!--                </thead>-->
-<!--                <tbody id="roofModuleList_detail">-->
-<!--                </tbody>-->
-<!--            </table>-->
-<!--            <table class="mb20">-->
-<!--                <thead>-->
-<!--                <tr>-->
-<!--                    <th>パワーコンディショナー</th>-->
-<!--                    <th class="col-20">台</th>-->
-<!--                </tr>-->
-<!--                </thead>-->
-<!--                <tbody id="pcsList_detail">-->
-<!--                </tbody>-->
-<!--            </table>-->
-<!--        </div>-->
-<!--    </div>-->
-<!--    <div class="tit">-->
-<!--        ● Hanwha Japan 年間発電量シミュレーション案内事項-->
-<!--    </div>-->
-<!--    <div class="guide-box">-->
-<!--        <pre class="guide-content" id="guideInfo"></pre>-->
-<!--    </div>-->
-<!--</div>-->
 <div class="section3">
     <table class="mb20">
         <tbody>
@@ -516,31 +409,15 @@
             <th class="col-15">作成日</th>
             <td id="drawingEstimateCreateDate"></td>
         </tr>
-        <tr>
+
-            <th class="col-15">都道府県</th>
-            <td id="prefName"></td>
-            <th class="col-15">日射量観測地点</th>
-            <td id="areaName"></td>
-        </tr>
-        <tr>
-            <th class="col-15">システム容量</th>
-            <td id="capacity"></td>
-            <th class="col-15">年間予測発電量</th>
-            <td id="anlFrcsGnrt"></td>
-        </tr>
-        <tr>
-            <th class="col-15">積雪条件</th>
-            <td id="snowfall"></td>
-            <th class="col-15">風速条件</th>
-            <td id="standardWindSpeedId"></td>
-        </tr>
         </tbody>
     </table>
-    <div >
+    <table >
-        ● <span id="pwrGnrSimTypeName"></span>
+        <tbody>
-    </div>
+        <tr>
+            <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
                 <div id="pwrGnrChartImg">
-        <table class="chart-wrapper">
+                    <table class="chart-wrapper" style="margin-top: 0;">
                         <tbody>
                         <tr id="htmlX">
                             <td class="y-axis-wrap">
@@ -569,7 +446,7 @@
                         </tbody>
                     </table>
                 </div>
-    <div>
+                <div style="text-align: left; margin-bottom: 5px;">
                     ● 予測発電量［kWh］
                 </div>
 
@@ -596,7 +473,35 @@
                     </tr>
                     </tbody>
                 </table>
-
+                <div style="margin-bottom: 5px; text-align: left;">
+                    ● Hanwha Japan 年間発電量シミュレーション案内事項
+                </div>
+                <div class="guide-box">
+                <pre class="guide-content" id="guideInfo">
+                </pre>
+                </div>
+            </td>
+            <td style="width: 40%; border: none; vertical-align: top; ">
+                <table class="mb20">
+                    <tbody>
+                    <tr>
+                        <th style="width: 100px;">システム容量</th>
+                        <td colspan="3" id="capacity"></td>
+                    </tr>
+                    <tr>
+                        <th style="width: 100px;">年間予測発電量</th>
+                        <td id="anlFrcsGnrt"></td>
+                        <th style="width: 100px;">都道府県</th>
+                        <td id="prefName"></td>
+                    </tr>
+                    <tr>
+                        <th style="width: 100px;">日射量観測地点</th>
+                        <td id="areaName"></td>
+                        <th style="width: 100px;">積雪量</th>
+                        <td id="snowfall"></td>
+                    </tr>
+                    </tbody>
+                </table>
                 <table class="mb20">
                     <thead>
                     <tr>
@@ -620,13 +525,10 @@
                     <tbody id="pcsList_detail">
                     </tbody>
                 </table>
-    <div>
+            </td>
-        ● Hanwha Japan 年間発電量シミュレーション案内事項
+        </tr>
-    </div>
+        </tbody>
-    <div class="guide-box">
+    </table>
-        <pre class="guide-content" id="guideInfo">
-        </pre>
-    </div>
 </div>
 </body>
 </html>