5

I am trying to have a print button that will print multiple pdfs or files when clicked.

Is it possible to have a print all button:

<button class="btn-u btn-u-orange" name="printall" id="printall" ><i class="icon-printer"></i> Print All</button>

But then somehow have it print all the pdfs or pages when clicked. I have been trying to do it with javascript but unfortunately am failing miserably.

    function PrintAll() {
        var pages =  ["forms/82040PDFCreator.cfm", "forms/poa.cfm", "forms/Billofsalevehicle.cfm"];
        for (var i = 0; i < pages.length; i++) {
            var oWindow = window.open(pages[i], "print");
            oWindow.print();
            oWindow.close();
        }
    }

$("#printall").on("click",function(){
        PrintAll();
    });

When I select print it is only popping up the first pdf to print and nothing else. Any help with this would be greatly appreciated.

Added coldfusion tag because I am calling .cfms that are populating the pdfs.

What Iv Tried is to create Iframes:

<iframe src="forms/82040PDFCreator.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
<iframe src="forms/poa.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
<iframe src="forms/Billofsalevehicle.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
<iframe src="forms/IRF.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
<iframe src="forms/InsuranceAffidavit.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>
<iframe src="forms/FeesBreakdown.cfm" style="width:400px; height:400px;" frameborder="0"></iframe>

They wont all show though. They all work but wont all show a few error out once theres more than three iframes. I have been trying to set an interval to load them hoping they wont timeout but have been unsuccessful. If I can get them all to appear I was going to try to make the button somehow cycle through the iframes and print them. Everytime I hit refresh some iframes work some dont, constantly changing which ones do and which ones dont.

Trying to set a timeout or interval or something to get them all to appear:

$("#printall").on("click",function(){
  var iframes = document.getElementsByTagName("iframe");
  var i = 0;
  window.setInterval(function(){
      if(i < iframes.length){
        i++;
      }
  }, 3000);
    });
David Brierton
  • 6,977
  • 12
  • 47
  • 104
  • 1
    `window.open` has some security issues, and will be potentially be blocked in the way that you're currently using it. This article should provide some insight: https://stackoverflow.com/questions/16239513/print-pdf-directly-from-javascript – jmcgriz Jan 24 '18 at 22:18
  • Possible duplicate of [Print PDF directly from JavaScript](https://stackoverflow.com/questions/16239513/print-pdf-directly-from-javascript) – jmcgriz Jan 24 '18 at 22:19
  • Just remove the `oWindow.close();` – Hackerman Jan 25 '18 at 13:52
  • @Hackerman when i remove that it only tries to print that last pdf – David Brierton Jan 25 '18 at 14:32

2 Answers2

4

This works for me in Chrome 64:

function PrintAll() {
  var pages =  ["forms/82040PDFCreator.cfm", "forms/poa.cfm", "forms/Billofsalevehicle.cfm"];

  var printNext = function(i) {
    i = i || 0;
    if (i >= pages.length) {
      return;
    }

    var wdw = window.open(pages[i], 'print');
    wdw.onload = function() {
      wdw.print();

      wdw.close();
      setTimeout(function() { 
        printNext(++i);
      }, 100);

    }
  };

  printNext();
}

The call to setTimeout is just to ensure that the window closes before printing the next one. Without it, I was getting some odd behavior.

jtate
  • 2,612
  • 7
  • 25
  • 35
  • hmmm its still stopping after the first pdf for me on chrome – David Brierton Jan 30 '18 at 13:56
  • @DavidBrierton how is your site configured? IIS, apache, node, or something else? Because when running this in Chrome from a local html file on my file system it doesn't work, but when I actually setup a site in IIS to host it, it does work. – jtate Jan 30 '18 at 17:49
  • Its a hosted site on the internet. Backend is coldfusion – David Brierton Jan 30 '18 at 18:51
  • i would give you the website but youd have to fill a million forms just to get to the page its not working on – David Brierton Jan 30 '18 at 18:52
  • @DavidBrierton ah I think I know the issue. try my edited answer. – jtate Jan 30 '18 at 19:41
  • Just tried it. It only opens that first pdf and then stops – David Brierton Jan 30 '18 at 19:57
  • @DavidBrierton very weird. It must be something related to coldfusion, as that seems to be the only difference from my example, since I'm not familiar with it and don't have any `.cfm` files to test with. My first answer worked for viewing PDF's and my edited answer works when viewing plain old html files. – jtate Jan 30 '18 at 20:01
  • hmm the cfms are just populating the variables on the pdfs. They open the pdf with all the variables – David Brierton Jan 30 '18 at 20:03
  • does yours open multiple? or just the first one? Curious if yours actually opens multiple. – David Brierton Feb 01 '18 at 21:56
  • @DavidBrierton its opens them in order; so it opens the first, then when I click print or cancel it opens the next, and so on. – jtate Feb 02 '18 at 15:42
  • ughhh i wish mine would do that. Wonder why i cant get it to work even when i just use like a website to test instead of the pdf – David Brierton Feb 02 '18 at 18:15
  • yea I'm really not sure why it's not working. If I was familiar with coldfusion and had a test environment setup I would be able to help more. But as it is, I'm not sure I can do anything else for you :\ – jtate Feb 02 '18 at 19:42
  • i tried creating just iframes with them all and some error out because they get timed out. Is it possible to control the timeout for each iframe? – David Brierton Feb 02 '18 at 19:56
  • If i show only a few iframes they load fine but if i try 5 or 6 they error out from timing out – David Brierton Feb 02 '18 at 19:57
  • three work fine everytime but once it gets to 4 then they start erroring out – David Brierton Feb 02 '18 at 19:58
  • are you saying you created an iframe inside the new window? can you show some sample code? – jtate Feb 02 '18 at 20:07
1

As an option, I would recommend you to use iframe.

Inside the iframe, you keep appending the content and print them one-by-one. Below is the function, that you can call inside your loop for each page. Append the content from your page, inside this iframe and keep printing them. At the end, we are removing the iframe using setTimeout. You can increase/decrease the time to adjust to your needs and speed:

function PrintAll() {
      var pages = ["forms/82040PDFCreator.cfm", "forms/poa.cfm", "forms/Billofsalevehicle.cfm"];
      for (var i = 0; i < pages.length; i++) {
        $('<iframe>', {
            name: 'myiframe',
            class: 'printFrame'
          })
          .appendTo('body');
        $('.printFrame').load(pages[i], function(response, status, xhr) {
          window.frames['myiframe'].focus();
          window.frames['myiframe'].print();

          //above two lines can be merged as:
          //window.frames['myiframe'].focus().print();

          setTimeout(() => {
            $(".printFrame").remove();
          }, 1000);
        });
      }
    }
Milan Chheda
  • 8,159
  • 3
  • 20
  • 35