如何使用 Angular8 在单击“打印”选项时显示完整的 html 内容

Question

I am working on Angular8 application, based on selection of dropdown, i have to print the whole html present based on selection of dropdown to be printed as shown in demo.

But here, i am not able to see the selected dropdown value, also contents displayed on the right side are hidden, and when the content is huge, i have added scroll in Additional comment section, when i click on print, i am able to see the scroll but not the content. Please help me to solve this issue.

DEMO

TS:

   public downloadPdf() {
     var printContent = document.getElementById('pdfDownload');
     this.verticalScrollTrue = false;
    $('pdfOpenHide').attr('hidden', true);
  let documentClone = $("html").clone();
    let printContainer = "printwrap";
    documentClone[0].getElementsByTagName('body')[0].innerHTML = "<div id='" + printContainer + "'>" + printContent.innerHTML + "</div>";
    let WinPrint = window.open('', '', 'left=300,top=0,width=1000,height=700,toolbar=0,scrollbars=0,status=0');
    WinPrint.document.write(documentClone.html());
    WinPrint.document.close();
    WinPrint.focus();
    setTimeout(() => {
      WinPrint.print();
      WinPrint.close();
    }, 1000);
}

Answer 1

To get rid of the scroll remove the css class "vert-scrollable-150".

Change:

<ul class="list-group list-group-flush vert-scrollable-150">

To

<ul class="list-group list-group-flush">