0

I have a button that once clicked opens a new window, writes html to that window and then sends a print command to it.

$("#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();
});

Now what I also need to do is add a @page styling to the head of that new window. Specifically a background image. This image is not a static one and could be anything the user uploads it to be. I've tried with both jQuery and javascript to add a style element to the head of the new window.

The javascript solution I tried (taken from here):

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

And a jQuery solution I tried:

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

Update:

Since by default I wasn't passing the entire document, only the html content, that was needed for printing, I also tried passing the entire html document to the new window:

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>';

But this didn't work aswell as no background is being rendered.

How can I add a style element to a document that is opened in a new window?

Community
  • 1
  • 1
Karl Viiburg
  • 832
  • 10
  • 34
  • 1
    Why do you need to add custom styling? Can this be solved through normal means? ie. a stylesheet specific to this popup. – Halcyon May 20 '14 at 14:32
  • @Halcyon `This image is not a static one and could be anything the user uploads it to be` so I can't have the image set in a seperate print media stylesheet. Or can I? – Karl Viiburg May 20 '14 at 14:35
  • 1
    So you are writing it to the page to begin with, so why are you not adding it there? – epascarello May 20 '14 at 14:37
  • Oh, I see, you're loading a dynamic style? Can you set the `style` property? `popup_window.body.style.background = "url(" + bgUrl + ") 50% 50% no-repeat;";`. – Halcyon May 20 '14 at 14:37
  • @Halcyon that adds the style to the body in which for a e.g. 3 page document, places it on the middle page. The reason why I want to use `@page` is so I can have the background on every page. – Karl Viiburg May 20 '14 at 14:49
  • @epascarello if you are referring to `w.document.write(printHtml);` then no as it gets passed only the html of the very content that is needed to be printed. – Karl Viiburg May 20 '14 at 14:57
  • And why are you not giving it the full document? – epascarello May 20 '14 at 15:26
  • @epascarello Sorry for the late response. I tried giving it the entire full document (from doctype to the ending html tag) but it still fails to render my background image. – Karl Viiburg May 21 '14 at 09:57

0 Answers0