Add a button called Print in the HTML file.

Set the onclick event for this button, as shown below.

  1. <div>
  2. <br>
  3. <input type="button" id="exporttopdf" value="Export to PDF" onclick="exportSelectedItemsToPdf();" style="display:none;" />
  5. <span> </span><input type="button" value="Print" id="print" style="display:none" onclick="PrintPage();" />
  7. </div>

Here is the function representing the link to that button and it gets executed, when triggered.

  1. function PrintPage()
  2. {
  3. // $("#tab-5").printThis();
  4. var contents = $("#tab-5").html();
  5. var frame1 = $('
  6. <iframe />');
  7. frame1[0].name = "frame1";
  8. frame1.css({ "position": "absolute", "top": "-1000000px" });
  9. $("body").append(frame1);
  10. var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
  11. frameDoc.document.open();
  12. //Create a new HTML document.
  13. frameDoc.document.write('
  14. <html>
  15. <head>
  16. <title>Case Details</title>');
  17. //Append the external CSS file.
  18. frameDoc.document.write('
  19. <link href="/sites/LPMS/Style Library/LPMS/CSS/jquery-ui.css" media="print" rel="stylesheet" />');
  20. frameDoc.document.write('
  21. <link href="/sites/LPMS/Style%20Library/LPMS/CSS/tab-styles.css" media="print" rel="stylesheet" />');
  22. frameDoc.document.write('
  23. <link href="/sites/LPMS/Style%20Library/LPMS/CSS/CaseDetails.css" media="print" rel="stylesheet" />');
  24. frameDoc.document.write('
  25. <link href="https://industowers.sharepoint.com/sites/LPMS/Style%20Library/LPMS/tinymce/js/tinymce/skins/lightgray/content.min.css" media="print" rel="stylesheet" />');
  26. frameDoc.document.write('
  27. </head>
  28. <body>
  29. ');
  31. //Append the DIV contents.
  32. frameDoc.document.write(contents);
  33. frameDoc.document.write('
  34. </body>
  35. </html>');
  36. frameDoc.document.close();
  37. setTimeout(function () {
  38. window.frames["frame1"].focus();
  39. window.frames["frame1"].print();
  40. frame1.remove();
  41. }, 5000);
  42. }
Click Print button for the result.

print
Here is the Print popup along with the preview on the right side, which gets generated, as shown below. Map your printer, select copies to print or cancel, if you want to exit from this Print menu.

print