我使用javascript创建了一个自定义打印函数(它与本教程https://levelup.gitconnected.com/pretty-print-your-site-with-javascript-d69f63956529密切相关)。当我只覆盖'ctrl + p'快捷方式时，它可以接受地运行，但是当我添加一个按钮来调用该函数时，它会导致'ctrl + p'和按钮打印给出以下错误'NotSupportedError:窗口。print:打印操作失败
这只发生在Firefox中，代码在Chrome中可以正常工作。
下面是一些代码 Javascript代码
const NsPrettyPrintPage = {
print: function () {
// create a hidden iframe named PrettyPrintFrame
const prettyPrintIframe = document.createElement('iframe');
prettyPrintIframe.setAttribute('id', 'PrettyPrintFrame');
prettyPrintIframe.setAttribute('name', 'PrettyPrintFrame');
prettyPrintIframe.setAttribute('style', 'display: none;');
// add newly created iframe to the current DOM
document.body.appendChild(prettyPrintIframe);
// add generated header content
prettyPrintIframe.contentWindow.document.head.innerHTML = this.generateHeaderHtml();
// add generated body content
prettyPrintIframe.contentWindow.document.body.innerHTML = this.generatePrintLayout();
document.getElementById("PrettyPrintFrame").contentWindow.print();
},
generatePrintLayout: function () {
// this function houses your default header/footer details and the switch to identify your pages by
let html = '';
html += '<h1 class="page-header"><img src="images/logo.png"></h1>'
html += this.calculatorResults();
// global footer elements
html += this.generateFooterHtml();
return html;
},
generateHeaderHtml: function () {
let headerHtml = '';
headerHtml += '<html><body><head>';
// loop through the styleSheets object and pull in all styles
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 () {
// add any global css you want to apply to all pretty print pages
let css = '<style>';
// global 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');
// iterate over result items
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;
}
};
// override 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加载页面时，Javascript中有一个错误。下面这行写着'FormPlugins.init();'。
<script>
$(document).ready(function() {
App.init();
DashboardV2.init();
FormSliderSwitcher.init();
ChartNvd3.init();
FormPlugins.init();
});
$('#heatcalc_form').on('keyup keypress', function(e)
{
var keyCode = e.keyCode || e.which;
if (keyCode === 13)
{
e.preventDefault();
return false;
}
});
</script>
这个错误是TypeError: $(…)。Colorpicker不是一个函数'.
函数现在可以工作了，这段代码作为打印函数。
print: function () {
// create a hidden iframe named PrettyPrintFrame
const prettyPrintIframe = document.createElement('iframe');
prettyPrintIframe.setAttribute('id', 'PrettyPrintFrame');
prettyPrintIframe.setAttribute('name', 'PrettyPrintFrame');
prettyPrintIframe.setAttribute('style', 'display: none;');
// add newly created iframe to the current DOM
document.body.appendChild(prettyPrintIframe);
setTimeout(function ()
{
// add generated header content
prettyPrintIframe.contentWindow.document.head.innerHTML = NsPrettyPrintPage.generateHeaderHtml();
// add generated body content
prettyPrintIframe.contentWindow.document.body.innerHTML = NsPrettyPrintPage.generatePrintLayout();
}, 100);
setTimeout(function ()
{
document.getElementById("PrettyPrintFrame").contentWindow.print();
}, 100);
}
结果是这是一个"赛跑"错误。这个，Firefox不打印，除非我设置一个断点?，答案为我指明了方向。