Firefox中调用自定义打印函数的按钮致打印失败问题

我用JavaScript编写了一个自定义打印函数，仅通过重写Ctrl+P快捷键触发时运行正常，但添加调用该函数的按钮后，无论是快捷键还是按钮触发打印，Firefox都会报错：NotSupportedError: Window.print: Clone operation for printing failed，而Chrome中代码可正常运行。

相关代码 #

JavaScript代码 #

const NsPrettyPrintPage = {
  print: function () {

  // 创建隐藏的iframe，命名为PrettyPrintFrame
  const prettyPrintIframe = document.createElement('iframe');

  prettyPrintIframe.setAttribute('id', 'PrettyPrintFrame');
  prettyPrintIframe.setAttribute('name', 'PrettyPrintFrame');
  prettyPrintIframe.setAttribute('style', 'display: none;');

  // 将新创建的iframe添加到当前DOM中
  document.body.appendChild(prettyPrintIframe);

  // 添加生成的头部内容
  prettyPrintIframe.contentWindow.document.head.innerHTML = this.generateHeaderHtml();

  // 添加生成的主体内容
  prettyPrintIframe.contentWindow.document.body.innerHTML = this.generatePrintLayout();

    document.getElementById("PrettyPrintFrame").contentWindow.print();
  },
  generatePrintLayout: function () {
    // 该函数包含默认页眉/页脚细节，以及页面识别逻辑

    let html = '';

        html += '<h1 class="page-header"><img src="images/logo.png"></h1>'

    html += this.calculatorResults();

    // 全局页脚元素
    html += this.generateFooterHtml();

    return html;
  },
  generateHeaderHtml: function () {
    let headerHtml = '';

        headerHtml += '<html><body><head>';

    // 遍历styleSheets对象，引入所有样式
    for (let i = 0; i < document.styleSheets.length; i++) {
      headerHtml += '<style>';

      try {
        for (let j = 0; j < document.styleSheets[i].cssRules.length; j++) {
          headerHtml += document.styleSheets[i].cssRules[j].cssText || '';
        }
      } catch(e) {}

      headerHtml += '</style>';
    }

    headerHtml += this.generateGlobalCss();

        headerHtml += '</head>';

    return headerHtml;
  },
  generateGlobalCss: function () {
    // 添加要应用到所有打印页面的全局CSS
    let css = '<style>';

    // 全局CSS
    css += 'body { padding: 40px 24px; }';
    css += 'table tr { page-break-inside: avoid; }';
    css += 'table td { vertical-align: top; padding: 4px 8px;}';
        css += '#blank_row { display: none; }';
    css += '@page { margin: 0.8cm; }';
        css += 'table thead { display: none; }';
        css += 'table td b { background-color: yellow !important; }';
    css += '</style>';

    return css;
  },
  generateFooterHtml: function () {
    let footerHtml = '</body></html>';

    return footerHtml;
  },
  calculatorResults: function() {
    let html = '';
        let resultItems = document.querySelectorAll('.table');

    // 遍历结果项
    resultItems.forEach(function(item) {
     html += item.outerHTML;
    });

        html += '<table class="table table-bordered"><tr><td></td><td>Indirect Fired</td><td>Direct Fired</td><td>Hydronic Fired</td><td>Electric</td></tr>';
        html += '<tr>';
        html += '<td>Total Project Cost</td><td><b>';
        html += document.querySelector('#final_project_cost_indirect_air').innerHTML;
        html += '</b></td>';
        html += '<td><b>';
        html += document.querySelector('#final_project_cost_open_flame').innerHTML;
        html += '</b></td>';
        html += '<td><b>';
        html += document.querySelector('#final_project_cost_hydronic').innerHTML;
        html += '</b></td>';
        html += '<td><b>';
        html += document.querySelector('#final_project_cost_electric_output').innerHTML;
        html += '</b></td></tr></table>';

    return html;
  }
};

// 重写Ctrl/Cmd + P快捷键
document.addEventListener("keydown", function (event) {
  if((event.ctrlKey || event.metaKey) && event.key == "p") {
        NsPrettyPrintPage.print();
        event.preventDefault();
        return false;
    }
} , false);

触发问题的Firefox打印按钮 #

<button type="button" class="btn btn-primary" onclick="NsPrettyPrintPage.print();"><i class="fa fa-file-pdf-o"></i>Print</button>

更新信息 #

移除所有引入的JavaScript库后，打印功能恢复正常。页面加载Bootstrap时，执行FormPlugins.init()行出现JavaScript错误：TypeError: $(...).colorpicker is not a function。

内容的提问来源于stack exchange，提问作者Kody Rogers