Possible way to load and Print PDF on button Click using javascript

Question

Could you please tell me the possible way to load and print pdf file that should work in all browers. Currently I am using iframe to show the file and then triggering print method but it's not working in IE.I searched a lot but none of the solution works.Please let me know any alternative approach to do this. Below is my sample code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pdfpoc.aspx.cs" Inherits="Game.pdfpoc" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function printpdf() 
{
    alert("pdfprint");
    var iframe = document.frames ? window.frames.frames["frPDF"] : document.getElementById("frPDF");
    var ifWin = iframe.contentWindow || iframe;
    try {

        ifWin.focus();
        ifWin.print();
    }
    catch (e) {
        window.print(false);
        //or when you get Invalid calling object error for IE9 and above
        //set the browser into IE8 compatibility mode will work
    }

    return false;
}
function changeSource() {
    console.log("change");
    var src = $("#frPDF").attr('src');
    console.log("src", src);

    if (src == "NCTP.pdf") {
        // $("#frPDF").attr('src', "NCTP1.pdf");
        url = "NCTP1.pdf";
    }
    else {
        //  $("#frPDF").attr('src', "NCTP.pdf");
        url = "NCTP.pdf";

    }
    console.log("Url" + url);
    var iframe = $('#frPDF')[0]; // reference to IFRAME element
    $.get(url, function () {
        iframe.src = url;
        $("#frPDF").load(function () {
            printpdf();
        });
        // $("#frPDF").trigger('onload');
    }).error(function () { alert('PDF not found'); });
    return false;
}
</script>
</head>

<body>
<form id="form1" runat="server">
  <input type="button" value="Change Source" onclick="javascript:changeSource()" />
  <div> Its not the part of Iframè <br />
    IFRAME PDF: <br />
    <iframe id="frPDF" height="800" width="800" src="NB.pdf?a=1"></iframe>
  </div>
</form>
</body>
</html>

unfortunately, for each browser - a different way of printing. For ie better use <embed id="frPDF" type="application/pdf" height="800" width="800" src="NB.pdf?a=1"></embed> — Igor Semin
– Igor Semin, Commented Aug 13, 2014 at 5:10

Igor Semin · Accepted Answer · 2014-08-13 05:44:42Z

1

For IE browser better use embed-tag for pdf, look at this(i replace your pdf source). it's work for me in IE 8+ and Chrome(and Opera ofc)

<input type="button" value="Change Source" name="btnChangeSource"  />
<div> Its not the part of Iframè <br />
    IFRAME PDF: <br />
    <embed id="frPDF" type="application/pdf" height="800" width="800" src="http://eurecaproject.eu/files/5013/9885/7113/example4.pdf"></embed>
 </div>

Solution for IE/Chrome/Opera

edited Aug 13, 2014 at 5:44

answered Aug 13, 2014 at 5:33

Igor Semin

2,5061 gold badge22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3729777 Over a year ago

It's not loading the document in IE as well in chrome.I am using IE11.

user5044085 · Accepted Answer · 2017-08-30 10:35:56Z

0

jQuery(document).ready(function($) {
  function print(url)
  {
      var _this = this,
          iframeId = 'iframeprint',
          $iframe = $('iframe#iframeprint');
      $iframe.attr('src', url);

      $iframe.load(function() {
          _this.callPrint(iframeId);
      });
  }

  //initiates print once content has been loaded into iframe
  function callPrint(iframeId) {
      var PDF = document.getElementById(iframeId);
      PDF.focus();
      PDF.contentWindow.print();
  }
});

answered Aug 30, 2017 at 10:35

user5044085

Collectives™ on Stack Overflow

Possible way to load and Print PDF on button Click using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related