everytime i try to print pdf using this method it will always produce blank pdf

Question

so i want to print pdf using button and javascript but it will always produce blank pdf/empty pdf. i want something like https://imgur.com/a/PsRqeBR, but i got this instead https://imgur.com/a/J7rzlSq

i try using window.open and then window.print but it still produce blank pdf, i also tried to put url inside window.open instead of declaring it first but that didn't work

HTML

<button type="button" onclick="printme()">click me...</button>

JavaScript

function printme(){
 var URL = "https://www.detik.com/";
 var W = window.open(URL);
 W.window.print();
}

maybe this link helps https://stackoverflow.com/questions/9852190/js-window-open-then-print — Quantumfox, Sep 25 '19 at 09:50
unfortunately, that link only provide solution if i want to print a text, i want to print a whole website page — Misael Indra Wijaya, Sep 25 '19 at 09:56

score 2 · Answer 1 · answered Sep 25 '19 at 09:46

2

you need to do window.print() instead of w.window.print()

function printme(){
 var URL = "https://www.detik.com/";
 var W = window.open(URL);
 window.print();
}

answered Sep 25 '19 at 09:46

Vivek

859
5
17

you want to print the whole website which is opened through window.open() as a pdf ? – Vivek Sep 25 '19 at 09:59
not exactly the whole website, just want to print the html on the page i want to print, you can see the example on the link i attached. – Misael Indra Wijaya Sep 25 '19 at 10:03
may be this is your solution https://stackoverflow.com/questions/8240472/printing-a-web-page-using-just-url-and-without-opening-new-window – Vivek Sep 25 '19 at 10:06
funny enough that's where i got my original code hehe, didn't work – Misael Indra Wijaya Sep 25 '19 at 10:11

score 0 · Answer 2 · answered Sep 25 '19 at 10:56

The source of the following code is Print an external page without opening it
which was mentioned in one of the answers here Printing a web page using just url and without opening new window?
I only modified the link to include your website address:

<!doctype html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>MDN Example</title>
  <script type="text/javascript">
    function closePrint() {
      document.body.removeChild(this.__container__);
    }

    function setPrint() {
      this.contentWindow.__container__ = this;
      this.contentWindow.onbeforeunload = closePrint;
      this.contentWindow.onafterprint = closePrint;
      this.contentWindow.focus(); // Required for IE
      this.contentWindow.print();
    }

    function printPage(sURL) {
      var oHiddFrame = document.createElement("iframe");
      oHiddFrame.onload = setPrint;
      oHiddFrame.style.position = "fixed";
      oHiddFrame.style.right = "0";
      oHiddFrame.style.bottom = "0";
      oHiddFrame.style.width = "0";
      oHiddFrame.style.height = "0";
      oHiddFrame.style.border = "0";
      oHiddFrame.src = sURL;
      document.body.appendChild(oHiddFrame);
    }
  </script>
</head>

<body>


  <p><span onclick="printPage('https://www.detik.com');" style="cursor:pointer;text-decoration:underline;color:#0000ff;">Print external page!</span></p>

</body>

</html>

i tried to run your demon, but i got an error message Error: { "message": "SecurityError: Permission denied to access property \"__container__\" on cross-origin object", "filename": "https://stacksnippets.net/js", "lineno": 22, "colno": 0 } — Misael Indra Wijaya, Sep 26 '19 at 02:37

everytime i try to print pdf using this method it will always produce blank pdf

2 Answers2