Javascript 向已在新窗口中打开的文档头添加样式_Javascript_Jquery_Printing

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

javascript jquery printing

Javascript 向已在新窗口中打开的文档头添加样式,javascript,jquery,printing,Javascript,Jquery,Printing,我有一个按钮，点击后打开一个新窗口，将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.pr

我有一个按钮，点击后打开一个新窗口，将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();
});

现在我还需要做的是在新窗口的头部添加一个

@页面

样式。特别是背景图像。此图像不是静态图像，可以是用户上传的任何图像。我尝试使用jQuery和javascript向新窗口的头部添加样式元素

我尝试的javascript解决方案（摘自）：

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

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

$（w.document）.find（“head”）.append（“@page{background:url（“+bgUrl+”）50%50%no repeat；}”）；

更新：

由于默认情况下我不会传递整个文档，只传递打印所需的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>';

var printHtml='@media print{@page{background:url（\''+bgUrl+'\'）中心重复；}}；
printHtml+=$（“#打印预览容器”）.html（）；
printHtml+=''；

但由于没有渲染任何背景，因此效果不佳

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

为什么需要添加自定义样式？这能通过正常手段解决吗？例如，特定于此弹出窗口的样式表。@Halcyon

此图像不是静态图像，可以是用户上传的任何图像，因此我不能在单独的打印媒体样式表中设置图像。或者我可以吗？那么你是从页面开始写的，为什么不在那里添加呢？哦，我明白了，你在加载动态样式？您可以设置样式
属性吗<代码>弹出_window.body.style.background=“url”（+bgUrl+”）50%50%不重复；“@Halcyon，将样式添加到正文中，例如，对于3页文档，将其放置在中间页。我想使用@page的原因是，我可以在每一页上都有背景。
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>';