Question

我正在尝试使用打印按钮，单击时将打印多个pdf或文件。

是否可以打印全部按钮：

enum Modes {
    DEV     = 0,
    PROD    = 1,
}

interface IDebug {
    mode: Modes | null;
    Modes: typeof Modes;
    readonly isInProdMode: boolean;
    assert: (condition: boolean, message: string) => void;
}

const Debug: IDebug = {
    mode: null,
    Modes,
    get isInProdMode() {
        return Debug.mode === Debug.Modes.PROD;
    },
    assert: (condition, message) => {
        if (condition) {
            if (Debug.isInProdMode) {
                console.warn(message);
            } else {
                throw message;
            }
        }
    },
};

export default Debug;

但是在某种程度上它会在点击时打印所有pdf或页面。我一直试图用javascript做到这一点，但不幸的是我失败了。

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

当我选择打印时，它只会弹出第一个要打印的pdf而不是其他内容。对此的任何帮助将不胜感激。

添加了coldfusion标记，因为我正在调用填充pdfs的.cfms。

Iv尝试创建iframe：

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

他们不会都表现出来。它们都有效，但是一旦超过三个iframe，它们都不会显示出一些错误。我一直试图设置一个间隔加载它们希望它们不会超时但是不成功。如果我可以让它们全部显示，我将尝试使按钮以某种方式循环遍历iframe并打印它们。每次我点击刷新一些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>

Answer 1

这适用于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();
}

对setTimeout的调用只是为了确保在打印下一个窗口之前窗口关闭。没有它，我会得到一些奇怪的行为。

Answer 2

作为一种选择，我建议您使用iframe。

在iframe内，您会不断添加内容并逐个打印。下面是函数，您可以在每个页面的循环内调用。在此iframe内附加您网页中的内容并继续打印。最后，我们正在使用iframe删除setTimeout。您可以增加/减少时间以适应您的需求和速度：

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

打印按钮打印多页

2 个答案: