为什么调用自定义打印函数的按钮会破坏Firefox上的打印？
为什么调用自定义打印函数的按钮会破坏Firefox上的打印？
提问于 2022-11-22 15:35:36
我使用javascript创建了一个定制的打印函数(它密切地模拟了本教程中的https://levelup.gitconnected.com/pretty-print-your-site-with-javascript-d69f63956529)。当我只覆盖'ctrl + p‘快捷方式时，它可以接受地运行，但是当我添加一个按钮来调用函数时，它会导致'ctrl + p’和按钮打印都出现以下错误：'NotSupportedError: Window.print:用于打印失败的克隆操作‘。
这只发生在火狐和代码工作良好的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);按钮，我补充说，似乎打破打印时，使用火狐。
<button type="button" class="btn btn-primary" onclick="NsPrettyPrintPage.print();"><i class="fa fa-file-pdf-o"></i>Print</button>更新：
如果我删除了所有包含的Javascript库，它就会正常工作。当页面启动引导时，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不是函数‘。
回答 1
Stack Overflow用户
发布于 2022-11-28 13:55:25
该函数现在正在使用此代码作为打印函数。
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 won't print unless I set a breakpoint?，回答指向正确的方向。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74535236
复制相关文章
相似问题
腾讯云开发者
