The media print is not displaying correctly when attempting to print with JavaScript

I am attempting to print a div using the following javascript code:

var divToPrint = document.getElementById(curid);

    var newTab = window.open('', 'Print-Window');

    newTab.document.open();

    newTab.document.write('<html><head><link rel="stylesheet" href="css/bootstrap.css"><link rel="stylesheet" href="css/font-awesome.min.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" type="text/css" media="print" href="css/print.css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');



    newTab.document.close();

    setTimeout(function () {
        newTab.close();
    }, 10);

Print.css content:

@media print {
        font-size:10px;
        font-family: Calibri;

    }

The style of the printed div is as follows: 

font-size:8pt;font-family: Calibri
;

The displayed div appears correctly, but when printed, the font size is 12 points according to my review in open office.

I have attempted modifying the attributes for media-print without success.

javascripthtmlcssprinting

Answer №1

Ensure that your CSS is structured like this:

@media screen and (max-width: 600px) {
    .main-content {
        font-size: 16px;
        color: red;
    }
}

The styles within the media query will only apply when the specified conditions are met. It's important to have valid CSS declarations inside the media query.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions on how to trigger an http request upon clicking a link, alter the href, and proceed to navigate to the new destination

Here is a piece of code that demonstrates how to modify an a element's href before the user navigates to the new link: <a href="/initial-link" onclick="modifyHref($event)" /> <script> function modifyHref(event) ...

javascripthtml

``Can anyone provide guidance on extracting data from Xmlhttprequest POST request on my Nodejs express backend?"

Is there a way to properly send the values of candid and candidresults to my backend route /savevote in Express? Any help on how to achieve this would be appreciated. var candid; var candidresults; ...

javascriptnode.jsexpressxmlhttprequesthttp-post

Ways to ensure CSS affects icon inside main element?

Struggling to match the background color of Material-UI icons with the rest of the list items on hover. The CSS is not applying to both the icon and text despite styling the overall class (className= "dd-content-item"). Any assistance would be greatly appr ...

javascriptcssreactjsmaterial-ui

Tips for storing unique values in an object using JavaScript

I need assistance with organizing my log data, which includes camera names and system IP addresses. I am trying to create an object where each unique system IP is a key, with an array of corresponding camera names as the value. Here is the code snippet I h ...

javascriptangularjs

Tips for obtaining a JSON response from a RESTful API in AngularJS by utilizing the $resource service

I have been working on my AngularJS code, and although I am receiving a response in the console, I am having trouble storing it in an array or JSON format. angular.module('user', ['ngResource']). config(function($httpProvider){ $h ...

javascriptangularjs

Ways to adjust column size in CSS

I am currently working on an e-commerce website where all the products are displayed on the same page in "cols". Unfortunately, I am facing issues with fixing the column width and height using CSS. <div class="container"> <div cla ...

htmlcssbootstrap-4

Unable to retrieve data from object properties despite their visibility

I am encountering issues accessing object properties, as they keep returning as undefined. I have attempted console.log(JSON.parse(this.$store.state.user.userId)); as well as console.log(JSON.parse(this.$store.state.user[0].userId)); However, when I ...

javascriptvue.js

Issues with Vue.js v-for functionality causing inconsistencies

Just delving into the world of Vue.js and encountering a hitch. I've been following a tutorial on Laracasts, but my v-for directive seems to be causing some trouble. Here's the HTML: <div id="root"> <ul> <li v-for="name in ...

htmlvue.jsv-for

How can I ensure that all items are automatically selected in the v-data-table component?

I am struggling with getting all rows in a v-data-table component to be checked by default when using the checkboxes created by the select-all feature to filter information in the parent component. So far, I have tried: Setting selectedItems to Ar ...

javascriptvue.jsvue-componentvuexvuetify.js

Prevent the href from navigating to the next page when a doubleclick event listener is triggered

In my project, I am using an anchor tag that redirects to another page. However, if the user double clicks on it, I want to prevent the default behavior and stop the redirection. <a href="{location}">My Link</a> element.addEventListen ...

javascripthtmlhrefanchorevent-listener

The intricate dance between JAVA and HTML

Can Java be compatible with HTML and JS? Is it possible for them to cooperate without using JSP? In order to connect the WEKA function, we utilized Java code through a JAR file, but now we also require HTML and JS links for visualization. Is there an alte ...

javascriptjavahtmljsp

The LOAD event in Highchart seems to be malfunctioning

function drawGraph($scope) { // Customized graph drawing function $scope.chartConfig = { chart: { type: 'spline', animation: Highcharts.svg, marginRight: 10, events: { ...

javascriptangularjsasp.net-mvchighcharts

Using Clip Path will result in the content always being hidden if it

Here is an example I created: div { -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); background-color: red; width: 150px; height: 150px; position: relative; } ul{ position: absolute; ...

cssclip-path

Under what circumstances is it possible to iterate through an empty array?

When defining arrays in JavaScript using Array(n), it creates an empty array. If I write the following code: Array(2).map((val) => console.log(val)) Nothing happens when running this code, but if I spread out the elements of the array into another a ...

javascriptarrays

Upon selecting a hyperlink, the function's value ought to be saved within a text box

Some programming languages I'm working with are PHP, Javascript, and HTML I've created a PHP function that is stored in page2.php: function pot() { does something; returns a value; } In another page (page1.php), there is a link and a textbox: ...

javascriptphpjqueryhtmlfunction

Having Trouble Loading AWS Amplify React Web App on Safari Browser

Currently, I am following a tutorial on creating a React single-page application with AWS Amplify. The tutorial can be found at this link. After completing the first two modules successfully, I encountered an issue in Module Three that I am hoping to reso ...

javascriptreactjsamazon-web-servicesaws-amplifyaws-amplify-cli

Warning message will appear before navigating away from the page if vee-validate is

Wondering how to create a simple confirmation prompt asking if the user really wants to leave a page that includes a basic HTML form. The HTML Form: <!DOCTYPE html> <html> <head></head> <body> <div id="app"> ...

javascriptvue.jsbulmavee-validate

A Guide to Making a Floating Widget That Can Move Beyond the Boundaries of a Website in React

Currently, I am in the process of developing a project that requires the implementation of a floating widget capable of overlaying content not just within the confines of the website, but outside as well. This widget needs to have the ability to remain on ...

javascripthtmlreactjspipwidget

Unable to apply border-radius to a specific HTML table

I am facing an issue where the border-radius is not being displayed on a specific HTML table. I am having difficulty in applying rounded corners to the entire table so that the table edges have a 30px curve. Here is an example of what I am looking for: ht ...

htmlcss

Implementing ng-show based on a specific position on a webpage

I am a beginner in AngularJS and I'm struggling to understand how to customize ng-show/ng-hide. I want the navigation bar below to only appear once the user has scrolled 600px down the page, but since I can't use jQuery with Angular, I'm uns ...

javascriptjqueryangularjs