Print out a content with the css style using javascript

Question

I have a specific page the container some information with a specific design

this design exist in a separate page print.css

I want to print this page with the same style and this page containe an image also

function printContent() {
    var divContents = document.getElementById("terms").innerHTML;
    var a = window.open('', '', 'height=1000, width=1000');
    a.document.write('<html>');
    a.document.write("<link rel=\"stylesheet\" href=\"print.css\" type=\"text/css\" media=\"print\"/>");
    a.document.write('<body >');
    a.document.write(divContents);
    a.document.write('</body></html>');
    a.document.close();
    a.focus();
    setTimeout(function () {
        a.print();
    }, 1000);
    a.print();
}

p {
    display: inline-block;
}

.container header .top {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #2c2a6b;
}

.container header .top h1 {
    color: white;
    background-color: #2c2a6b;
    padding: 10px 20px;
    width: fit-content;
    width: -moz-fit-content;
    border-top-left-radius: 20px;
}

.container header .top .print-header {
    display: flex;
    gap: 20px;
}

.container header .top .print-header h2{
    color: #2c2a6b;
    align-self: flex-end;
}

.container header .print-subheader {
    padding: 20px 0;
    color: #2c2a6b;
}

.container main .print-content .top {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #2c2a6b;
}

.container main .print-content .top img {
    width: 50px;
}

.container main .print-content .top h3 {
    color: #2c2a6b;
}

.container main .print-content .content{
    margin-top: 20px;
}

.container main .print-content .content .inner-box{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.container main .print-content .content .inner-box p{
    color: #000;
    font-weight: 500;
    font-size: 16px;
}

<body>
    <div class="container" id="terms">
        <header>
            <div class="top">
                <h1>قطاع السياحة</h1>
                <div class="print-header">
                    <img src="images/title-icon.png" alt="title">
                    <h2> اصدار رخصة الإيواء السياحي</h2>
                </div>
            </div>
            <div class="print-subheader">
                <h2>الحصول على رخصة استثمار (المستثمر الاجنبي)</h2>
            </div>
        </header>
        <main>
            <div class="print-content">
                <div class="top">
                    <img src="images/terms.png" alt="terms">
                    <h3>الاشتراطات العامة</h3>
                </div>
                <div class="content">

                </div>
            </div>
        </main>
    </div>
    <input type="button" class="btn-print" onclick="printContent()" value="Print">
</body>

the problem is that the image and the style don't appear after i click the print button

after a search i found that i should put a timeout, and i should include the print.css file with media print but after all that the problem still exist i can't print the page with the image and the css style anyone can help please

When document.write is called after the page has been parsed, it cretes a new document, which wipes out all the code on the page, only what is written with d.w is there. — Teemu
– Teemu, Commented Dec 13, 2021 at 15:26

Aaron Cicali · Accepted Answer · 2021-12-13 15:31:43Z

3

This seems like an overly complicated solution to a really simply requirement, but perhaps there are details you've left out of the question.

It seems like you're including the CSS file dynamically just for printing purposes, but CSS already has a feature for this. I recommend removing all of your JavaScript, and instead wrapping your CSS in a print media query, like so:

@media print {
    p {
        display: inline-block;
    }

    /* the rest of your styles here */
}

Simply include these print styles with the rest of your page's CSS and the browser will take care of applying them for the print media.

If you absolutely must do this with JavaScript, you're going to need to wait until the stylesheet is finished loading. You can do that by creating the element, attaching an event listener for the onload event, then appending it to the DOM.

Something like:

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

answered Dec 13, 2021 at 15:31

Aaron Cicali

1,55615 silver badges30 bronze badges

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

1 Comment

Ahmed Sayed Sk Over a year ago

This is a helpful answer that cover what I need, Thanks @Aaron

Jan Kees · Accepted Answer · 2021-12-13 15:30:17Z

Perhaps this will help

HTML

<body>
    <div class="container" id="terms">
        <header>
            <div class="top">
                <h1>قطاع السياحة</h1>
                <div class="print-header">
                    <img src="images/title-icon.png" alt="title">
                    <h2> اصدار رخصة الإيواء السياحي</h2>
                </div>
            </div>
            <div class="print-subheader">
                <h2>الحصول على رخصة استثمار (المستثمر الاجنبي)</h2>
            </div>
        </header>
        <main>
            <div class="print-content">
                <div class="top">
                    <img src="images/terms.png" alt="terms">
                    <h3>الاشتراطات العامة</h3>
                </div>
                <div class="content">

                </div>
            </div>
        </main>
    </div>
  <button onclick="window.print();" class="noPrint">
Print Me
</button>
</body>

CSS

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

p {
    display: inline-block;
}

.container header .top {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #2c2a6b;
}

.container header .top h1 {
    color: white;
    background-color: #2c2a6b;
    padding: 10px 20px;
    width: fit-content;
    width: -moz-fit-content;
    border-top-left-radius: 20px;
}

.container header .top .print-header {
    display: flex;
    gap: 20px;
}

.container header .top .print-header h2{
    color: #2c2a6b;
    align-self: flex-end;
}

.container header .print-subheader {
    padding: 20px 0;
    color: #2c2a6b;
}

.container main .print-content .top {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #2c2a6b;
}

.container main .print-content .top img {
    width: 50px;
}

.container main .print-content .top h3 {
    color: #2c2a6b;
}

.container main .print-content .content{
    margin-top: 20px;
}

.container main .print-content .content .inner-box{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.container main .print-content .content .inner-box p{
    color: #000;
    font-weight: 500;
    font-size: 16px;
}

By adding the class="noPrint" you can remove what you dont want printed out! Let me know if this is what you had in mind

here is a codepen.io link

score 0 · Accepted Answer · 2021-12-13 15:35:25Z

0

Do you want to load the image via js?

or is that the picture?

terms.png

This should be displayed, but you can also load it separately via js and adjust it in print.css.

a.document.write('<link rel="stylesheet" type="text/css" href="./print.css">'); //loads the style

document.write('<img src="./images/terms.png"> //or
document.write('<img src="./images/terms.png" style="style for the picture">

edited Dec 13, 2021 at 15:35

answered Dec 13, 2021 at 15:23

user17658201

2 Comments

user17658201 Over a year ago

oh and if it is not displayed it might be because of the z-index?

user17658201 Over a year ago

you can also hide in a separate css everything you don't need - display: none;

Collectives™ on Stack Overflow

Print out a content with the css style using javascript

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related