CODEWITHSUNDEEP
javascriptjqueryiframe
user3729777
user3729777

Reputation: 9

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

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>

Upvotes: 0

Views: 8046

Answers (2)

user5044085
user5044085

Reputation: 

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();
  }
});

Upvotes: 0

Igor Semin
Igor Semin

Reputation: 2496

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

Upvotes: 1

Related Questions