Print out a content with the css style using javascript-CodePudding

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

                </div>
            </div>
        </main>
    </div>
    <input type="button"  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

CodePudding user response：

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

CodePudding user response：

Perhaps this will help

HTML

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

                </div>
            </div>
        </main>
    </div>
  <button onclick="window.print();" >
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 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

CodePudding user response：

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">