Question

我需要打印具有A4尺寸的特定div。但是，当我打印时，在打印屏幕上我的div不适合A4页面。我的div大小为568px和842px（A4页面大小）。如何调整div大小以将页面打印为A4？

我要打印的html内容如下：

 <div  id="print-section" class="page" style="height=100%,width=auto;outline:1px solid black;'">
                  <div id="TableDiv"  *ngFor="let questionarePage of questionarePageList; let i = index;"  >
                    <div   [style.display]="(pageIndex-1 == i)?'none':'inherit'">
                      <div #examInfoRow style="float:left;width:596px;height:42px;max-height:42px;display:flex" *ngIf="examInfoRowExist">
                        <div id="FirstRowFirstColumnDiv" style="width:175px;height:42px;outline:1px solid black;display: inline-block;">

                        </div>
                        <div  id="FirstRowSecondColumnDiv" style="width:296px;height:42px;outline:1px solid black;display: inline-block;">

                        </div>
                        <div  id="FirstRowThirdColumnDiv" style="width:125px;height:42px;outline:1px solid black;display: inline-block;">

                </div>
              </div>

              <div id="SecondRowDiv" [style.width.px]="widthSecondRowDiv" [style.height.px]="heightSecondRowDiv"  [style.max-height.px]="maxHeightSecondRowDiv" style="float:left;outline:1px solid black;display:flex;">
                  <div id="SecondRowFirstColumnDiv" style="width:298px;height:100%;outline:1px solid black;display: inline-block;">
                    <div #leftQuestions style="width: 298px; height: 100%; word-break: break-all;display:table-cell; text-align: center;">
                      <div *ngFor="let questionare of questionarePage.leftQuestionareList"  style="height: auto;width: 290px;word-break: break-all;outline:1px solid black;display: inline-block; text-align: left;"  [innerHTML]="questionare.question | safeHtml" > </div>                             
                    </div>
                  </div>
                  <div id="SecondRowFirstColumnDiv" style="width:298px;height:100%;outline:1px solid black;display: inline-block;">                          
                    <div #rightQuestions style="width:298px; height:100%; word-break: break-all;">
                      <div *ngFor="let questionare of questionarePage.rightQuestionareList" style="height: auto;width: 290px; word-break: break-all;outline:1px solid black;display: inline-block; text-align: left;"  [innerHTML]="questionare.question | safeHtml" > </div>
                    </div>  
                  </div>
              </div>
            </div>                      
          </div>   
        </div>

我的打印方法如下：

printComponent(cmpName) {
let printContents = document.getElementById(cmpName).innerHTML;
let popupWin;
// let originalContents = document.body.innerHTML;

// document.body.innerHTML = printContents;

// window.print();

// document.body.innerHTML = originalContents;

popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
      <html>
          <head>
              <title>Print tab</title>
              <style>
              @media only print{
                @page{size:A4;}
             }
              </style>
          </head>
          <body onload="window.print();window.close()">${printContents}
          </body>
      </html>`
);
popupWin.document.close();

}

我如何将我的html div调整为A4打印页面中的整页？

0 个答案: