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

What is the best way to send an array of grouped data to a table

What is the best way to retrieve data from Elastic Search using Node.js?

What is the best way to utilize a single component for validating two other components?

Placing a CSS image with absolute positioning on top of a responsive image

A guide on expanding an HTML table dynamically with MVC razor syntax

Transfer an array via Ajax to a Python server script

Achieving horizontal alignment for divs in CSS can be challenging

Issue with Flask-Cors in Nuxt with Flask and JWT authentication implementation

Repeated instances in a loop are strictly prohibited

What is the best way to ensure that my theme button changer has an impact on all pages throughout my website, not only on the

converting an entire HTML layout into a PDF using JavaScript

Do we need to employ strict mode when utilizing specific ES6 functions in Node.js?

Angularjs is struggling to connect data to the user interface

What is the best way to upload a file to Firebase Storage using React?

Active Admin: Maintaining the top menu navigation bar while adding a fresh custom page

executing the following event in Node.js

What is the best way to display a loading image and temporarily disable a button for 3 seconds before initiating the process of sending post data from another page via

Ways to retrieve the content from a textfield

Switch button for updating text, icon, and displaying search bar

To determine the class of an element and reveal its parent if the class is present