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
– Alon Eitan, Commented May 12, 2017 at 19:13
Possible duplicate of How do I write content to another browser window using Javascript? — Heretic Monkey
– Heretic Monkey, Commented May 12, 2017 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
– Alon Eitan, Commented May 12, 2017 at 19:21
It does more than demonstrate the problem, it solves it: stackoverflow.com/a/169843/215552. — Heretic Monkey
– Heretic Monkey, Commented May 12, 2017 at 19:23

Devendra Lattu · Accepted Answer · 2017-05-12 19:23:16Z

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, 2017 at 19:23

answered May 12, 2017 at 19:15

Devendra Lattu

2,8122 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rokibul Hasan Over a year ago

Still it can't take stylesheet.

Priya · Accepted Answer · 2017-05-12 19:36:57Z

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();

Jodo · Accepted Answer · 2017-05-12 19:37:44Z

0

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

answered May 12, 2017 at 19:37

Jodo

4,7938 gold badges41 silver badges51 bronze badges

Collectives™ on Stack Overflow

How to link css file on javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related