Question 10797 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

after printing not getting the css and bootstrap applied – Jquery

After clicking the submit button on the first output page, its css part is gone and show only simple and default page of the form. It’s not fulfilling my requirement. If use only inline css then it will work but not in external css. Please help me I am attaching the code and output I am getting and output I want.

HTML CODE

<div id="parent">
  <div class="col-md-11 mx-auto">
    <div class="main-title text-center mb-3">RELIEVING LETTER</div>
    <div class="form-row mb-2">
      <div class="col-md-2">
        <label class="heading" for="validationDefault02">Date:-</label>
      </div>
      <div class="col-md-3">
        <b><label for="" id="rlvRDate">Resign</label></b>
      </div>
    </div>
    <div class="form-row mb-2">
      <div class="col-md-2">
        <label class="heading" for="validationDefault02">Name:-</label>
      </div>
      <div class="col-md-3">
        <b><label for="" id="rlvFullname">Fullname</label></b>
      </div>
      <div class="col-md-2">
        <label class="heading" for="validationDefault02">Emp Code:-</label>
      </div>
      <div class="col-md-3">
        <b><label for="" id="rlvEmpID">EmpID</label></b>
      </div>
    </div>
  </div>
  <div class="col-lg-12 mx-auto">
    <hr class="hr-line" />
  </div>
  <div class="col-md-11 mx-auto mb-2" id="rlv-ltr">
    <div class="row mb-5">
      <p>Dear <b><label for="" id="rlvFirstName">firstName</label></b>,</p>
      <div class="col-md-11">
        <p>
          This is to inform you that we are accepting your resignation dated <b><label for=""
              id="rlvRDate1">ResignDate</label></b> and officially releasing you on <b><label for=""
              id="rlvLastDate">RelieveDate</label></b>.
        </p>
        <p>
          Please complete all transition process before your last
          working date.
        </p>
        <p>
          Thank you so much for all your contribution. We wish you all
          the best in your next endeavors.
        </p>
      </div>
      <div class="col-md-11">Thank You.</div>

    </div>
    <div class="col-lg-12 mx-auto">
      <hr class="hr-line" />
    </div>
  </div>
</div>
<div class="row">
  <input type='button' class="btn btn-success btn-sm mx-auto" value='Submit' onclick='myApp.printDiv()' />
</div>

JS CODE

var myApp = new function () {
    this.printDiv = function () {
        // Store DIV contents in the variable.
        var div = document.getElementById('parent');

        // Create a window object.
        var win = window.open(''); // Open the window. Its a popup window.
        win.document.write(div.outerHTML);     // Write contents in the new window.
        win.print();       // Finally, print the contents.
    }
  }

Output I getting before click

enter image description here

Output I getting after click

enter image description here

Tags:

2

Answers


  1. 0

    In order to style the printed content, you can use the @media print rule in your CSS file.

    For example, to change the font size of the printed content, you can add the following code to your CSS file:

       @media print {
  body {
    font-size: 12pt;
  }
}

    Code written in @media print {} will be considered for print

    Login or Signup to reply.
  2. 0

    here’s how I displayed the content of the first output page in the new window. In the JavaScript code, pass in the file path of the first output page when opening the new window: var win = window.open(‘index.html’)

    My JavaScript code:

    var myApp = new function () {
this.printDiv = function () {
    // Create a window object.
    var win = window.open('index.html') // Open the window. Its a popup window. Also, display content of the the index html file in the new window.
    win.print();// Finally, print the contents.
}

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search