Daily Use - Notes

Printing PDF using JavaScript #

For printing the PDF using JS we need to use the following code. In which we have used a input tag and onClick of that input we have called the div id which we want to print.

<section>
  <div id="printContent">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum quisquam
      esse natus error beatae tempore perspiciatis maxime, doloremque dicta quo
      obcaecati officia amet. Reiciendis necessitatibus qui voluptatem excepturi
      mollitia provident at hic quia earum, architecto odio quidem doloremque
      atque officia porro.
    </p>
  </div>

  <input
    type="button"
    onclick="printDiv('printContent')"
    value="Click me to get the PDF!"
  />
</section>

function printDiv(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var originalContents = document.body.innerHTML;
  document.body.innerHTML = printContents;
  window.print();
  document.body.innerHTML = originalContents;
}

Hide a div from printing a webpage using CSS #

@media print {
  .noprint,
  .noprint * {
    display: none !important;
    height: 0;
  }
}

/*****
    We can also use : 
    1. [  visibility: hidden; ]
    2. Bootstrap 5 class  : [ .d-print-none ]
    3. If you don't want to use CSS you can use show/hide with  JavaScript.

******/

Appending a div to the body of a webpage using JavaScript #

$("body").append(
  "<div style='position:absolute;width:100%;height:100%;z-index:1000;top:0;left:0;'></div>"
);

/*
Use Case : When we want to disable something at the time of AJAX Call.
*/

Reloading iframe using JavaScript #

document.getElementById("iFrameID").contentDocument.location.reload(true);
/* In place of [ iFrameID ] you need to pass your own iframe id */

Clear the content of an iframe using JavaScript #

$("iFrameID").contents().find("body").html("");
/* In place of [ iFrameID ] you need to pass your own iframe id */

Filename too long in Git for Windows #

git config --system core.longpaths true

Stash some untracked file in Git for Windows #

git stash save --keep-index --include-untracked

Update image path in JQuery #

<div style="margin: 50px" class="container">
        <h2 type="button"
          id="updateimg"
          style="
            outline: none;
            border: none;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
          "
        >
          Click me
          <img  id="update" height="300" width="auto" src="./assets/jpg/img1.jpg"  style=" padding-left: 50px;"/>
        </button>
      </div>

var plus = "/assets/jpg/img1.jpg";
var minus = "/assets/jpg/img2.jpg";

$("#updateimg").click(function () {
  var test = $(this).parent(".container").find("#update");
  if (test.attr("src") === plus) {
    test.attr("src", minus);
  } else {
    test.attr("src", plus);
  }
});

Install angular project in same directory #

ng new yourAppName  --directory ./

Resourse :

• MDN - beforeprint event