javascript - Print button printing multiple pages - Stack Overflow

admin管理员组

文章数量:1396878

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

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

• javascript
• jquery
• coldfusion

Share Improve this question Follow edited Feb 2, 2018 at 20:23 David Brierton asked Jan 24, 2018 at 22:02 David BriertonDavid Brierton 7,3971313 gold badges5555 silver badges107107 bronze badges 4

• 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: stackoverflow./questions/16239513/… – jmcgriz Commented Jan 24, 2018 at 22:18
• Possible duplicate of Print PDF directly from JavaScript – jmcgriz Commented Jan 24, 2018 at 22:19
• Just remove the oWindow.close(); – Hackerman Commented Jan 25, 2018 at 13:52
• @Hackerman when i remove that it only tries to print that last pdf – David Brierton Commented Jan 25, 2018 at 14:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +25

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.

As an option, I would remend 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);
        });
      }
    }

本文标签： javascriptPrint button printing multiple pagesStack Overflow