How to link css file on javascript

Question

I want to link css file on printing specific div but it dose not get stylesheet on printing area. How can i fix this. Here is my source code:

function print_area(){

    var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
    win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="css/thinking_aloud_test - Copy.css" media="print"></head><body>');
    win.document.write($("#article_main_wrapper").html());
    win.document.write('</body></html>');
    win.print();
    win.close();


  }

You probably think that writing the HTML like you do in notepad will work, but it won't (The browser will not wait, it will auto-close the missing closing tags). You need to write that whole HTML in a single `win.document.write` — Alon Eitan, May 12 '17 at 19:13
Possible duplicate of [How do I write content to another browser window using Javascript?](http://stackoverflow.com/questions/169833/how-do-i-write-content-to-another-browser-window-using-javascript) — Heretic Monkey, May 12 '17 at 19:18
You should also look at http://stackoverflow.com/q/802854/215552 — Heretic Monkey, May 12 '17 at 19:18
@MikeMcCaughan That duplicate don't answer this specific issue, it's just demonstre it, but doesn't mention anything about multiple `document.write` as in this question — Alon Eitan, May 12 '17 at 19:21
It does more than demonstrate the problem, it solves it: http://stackoverflow.com/a/169843/215552. — Heretic Monkey, May 12 '17 at 19:23
@RokibulHasan Use absolute url for the `herf` - The window source/base URL is `about:blank` — Alon Eitan, May 12 '17 at 19:34

Devendra Lattu · Answer 1 · 2017-05-12T19:23:16.507

0

var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');

var html = '<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="css/thinking_aloud_test - Copy.css" media="print"></head><body>';
html += $("#article_main_wrapper").html();
html += '</body></html>';

win.print();
win.close();

win.document.write(html); // You need to append the `html` in a single element
// Write it at once to a single win.document.write

edited May 12 '17 at 19:23

answered May 12 '17 at 19:15

Devendra Lattu

2,532
2
15
25

Still it can't take stylesheet. – Rokibul Hasan May 12 '17 at 19:32

Priya · Answer 2 · 2017-05-12T19:36:57.883

Here is an example of injecting css via javascript.

(function(d, s, id) {
  var css, icss = d.getElementsByTagName(s)[0] || d.getElementsByTagName('head')[0];
  if (d.getElementById(id)) {
    return;
  }
  css = d.createElement(s);
  css.id = id;
  css.href = "http://getbootstrap.com/dist/css/bootstrap.min.css";
  css.rel = "stylesheet";
}(document, 'link', 'bootstrap'));

<html>
    <head>
    </head>
    <body>
        <button class="btn btn-success">normal button to bootstrap button by adding css</button>
     </body>
</html>

if it's for printing with a new tab where you want to append content with css and then print, just go with there steps

var content = document.createTextNode("Some HTML content you want to print");    
var css = document.createElement('link');
css.rel  = 'stylesheet';
css.type = 'text/css';
css.href = 'css url';
css.media = 'all';
printwindow.focus(); // if its a new tab where you want to do print operation, assuming printwindow is your new tab/popup opened by window.open()
printwindow.document.head.appendChild(css);
printwindow.document.body.appendChild(content);
printwindow.print();
printwindow.document.close();

score 0 · Answer 3 · answered May 12 '17 at 19:37

Another possibility is to read the content of the stylesheet and write it directly into the HTML. Here an example using jQuery:

function print_area(){
    var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
    $.get('main.css', function (data) {
        console.log(data);

        win.document.write('<html><head><title>my div</title><style>');
        win.document.write(data);
        win.document.write('</style></head><body >');
        win.document.write('<div id="article_main_wrapper">My DIV</div>');
        win.document.write('</body></html>');
        win.print();
        win.close();
    });
}

How to link css file on javascript

3 Answers3