Question

我有一个按钮，一旦点击打开一个新窗口，将html写入该窗口，然后向其发送打印命令。

$("#print-preview").on("click", ".preview-print-btn", function(e){
  e.preventDefault();
  var printHtml = $("#print-preview-container").html();
  var w = window.open(" ");
  w.document.write(printHtml);
  w.print();
  w.close();
});

现在我还需要做的是在新窗口的头部添加@page样式。特别是背景图像。此图像不是静态图像，可以是用户上传的图像。我已尝试使用jQuery和javascript将样式元素添加到新窗口的开头。

我尝试过的javascript解决方案（取自here）：

var style = w.document.createElement('style');
w.document.head.appendChild(style);
style.innerHTML = '@page { background: url(' + bgUrl + ') 50% 50% no-repeat; }';

我尝试了一个jQuery解决方案：

$(w.document).find("head").append('<style type="text/css">@page { background: url(' + bgUrl + ') 50% 50% no-repeat; }</style>');

更新

因为默认情况下我没有传递整个文档，只有打印所需的html内容，我也尝试将整个html文档传递到新窗口：

var printHtml = '<!DOCTYPE html><html><head><style>@media print { @page { background: url(\'' + bgUrl + '\') center center repeat; } }</style></head><body>';
printHtml += $("#print-preview-container").html();
printHtml += '</body></html>';

但这并不起作用，也没有渲染背景。

如何将样式元素添加到在新窗口中打开的文档？

将样式添加到已在新窗口中打开的文档头

0 个答案: