Display text on the screen with a customized design using JavaScript's CSS styles

Question

Display text on the screen with a customized design using JavaScript's CSS styles

I need help with printing a specific page that contains some information designed in print.css. I want to print this page, including an image, with the same style.

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>Tourism Sector</h1>
                <div class="print-header">
                    <img src="images/title-icon.png" alt="title">
                    <h2>Issuance of Tourist Accommodation License</h2>
                </div>
            </div>
            <div class="print-subheader">
                <h2>Obtaining an Investment License (Foreign Investor)</h2>
            </div>
        </header>
        <main>
            <div class="print-content">
                <div class="top">
                    <img src="images/terms.png" alt="terms">
                    <h3>General Terms</h3>
                </div>
                <div class="content">

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

The issue I'm facing is that the image and style do not appear correctly after clicking the print button. Despite trying different solutions like putting a timeout and including the print.css file with media print, the problem persists. Any assistance would be greatly appreciated.

javascript html css

Answer 1

Answer №1

It appears that the solution provided may be overly complex for a simple requirement, but it's possible there are additional details not mentioned in the question.

Seems like you're dynamically including the CSS file for printing purposes, however, CSS already has a built-in feature for this. I suggest removing all JavaScript and instead utilizing a print media query within your CSS:

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

    /* add any other necessary styles here */
}

Integrating these print styles into your existing CSS will allow the browser to handle them automatically when in print mode.

If using JavaScript is absolutely necessary, you'll need to ensure the stylesheet has finished loading before executing any code. This can be achieved by creating an element, attaching an event listener for the onload event, then appending it to the DOM.

Here's an example:

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

Answer 2

It appears that the solution provided may be overly complex for a simple requirement, but it's possible there are additional details not mentioned in the question.

Seems like you're dynamically including the CSS file for printing purposes, however, CSS already has a built-in feature for this. I suggest removing all JavaScript and instead utilizing a print media query within your CSS:

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

    /* add any other necessary styles here */
}

Integrating these print styles into your existing CSS will allow the browser to handle them automatically when in print mode.

If using JavaScript is absolutely necessary, you'll need to ensure the stylesheet has finished loading before executing any code. This can be achieved by creating an element, attaching an event listener for the onload event, then appending it to the DOM.

Here's an example:

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

Answer 3

Answer №2

Maybe this can offer some assistance

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

If you include the class="noPrint" you can eliminate elements from being printed! Let me know if this meets your needs

Check out this codepen.io link

Answer 4

Maybe this can offer some assistance

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

If you include the class="noPrint" you can eliminate elements from being printed! Let me know if this meets your needs

Check out this codepen.io link

Answer 5

Answer №3

Would you like to dynamically load the image using JavaScript?

Or is this the image in question?

terms.png

The image should be visible, but you also have the option to load it separately with JavaScript and customize it in print.css.

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

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

Answer 6

Would you like to dynamically load the image using JavaScript?

Or is this the image in question?

terms.png

The image should be visible, but you also have the option to load it separately with JavaScript and customize it in print.css.

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

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

Display text on the screen with a customized design using JavaScript's CSS styles

Answer №1

Answer №2

Answer №3

Similar questions

Unforeseen issues arise when working with CSS selectors

Perform an Ajax request upon clicking on the dropdown list item

Protractor functions perfectly on localhost, but encounters a Timeout error when used remotely - the asynchronous callback was not executed within the specified timeout period

Tips for getting the setTimeout() function to behave like a for loop

Ways to determine if a script is currently running within Node.js环境

Socket.io operates individually with each user

A guide on parsing a nested JSON file with ExtJS 4

The issue of req.file being consistently undefined in Node.js multer

Updating a field in Mongoose by referencing an item from another field that is an array

Transform uploaded image file into a blob format and store it in a VueJS database

Decoding JavaScript content with Python

The functionality of ellipsis, which consists of three dots, allows the text to expand

Modify variables in the child function to be utilized in the parent function

HTML file unable to connect with CSS stylesheet

Issue with displaying personalized radio buttons

Fixing an erroneous value that has been dragged into the drop function with Jquery

JQuery Keyup event is not functioning as expected

Despite being correctly linked in EJS and without any errors, the CSS is still not loading

Display HTML components as JSON data using AngularJS

Is there a way to customize the hover style of Material UI Select or Menu MenuItem using the theme?