Use the Window.print function to easily print a HTML page to the printer

I've been attempting to achieve this for a while now. I have an HTML page with various icons, and when I click print, my goal is to have the page printed with all the icons intact.

I followed the advice from a solution referenced in Printing specific div

However, I'm facing issues where the icons aren't loading and the formatting of the page becomes chaotic. Any suggestions on how to seamlessly print the page without disrupting the existing layout and styling?

The application includes a cshtml file with styles and icon references that are commonly used across different html pages. Therefore, when I execute window.print(), the styles are not applied as the specific div being printed doesn't load the necessary icons. How can I successfully call window.print() in such cases where styles are defined globally for the entire application?

javascriptjqueryhtmlcssangularjs

Answer №1

var win = window.open('','printwindow');
    win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" href="http://localhost:8080/fin/pcd/css/printlib.css" type="text/css" /><link rel="stylesheet" href="css/main.css" type="text/css" /></head><body>');
    win.document.write($("#"+divid+"key").html());
    win.document.write($("#"+divid2+"line").html());
    win.document.write('<div class="testPrint"></div><script>;</script></body></html>');
    win.print();

You can utilize the above code to print specific divs and apply necessary styles, including icons, by importing CSS.

Additional information:

For a better understanding, refer to this working example link: https://plnkr.co/edit/f1JkCgYvI10rsdm5msmM?p=preview

Note: If you set a background-color in the printed page's CSS, the attribute will only be effective if background graphics are enabled in Chrome, unnecessary for other browsers.

Refer to the image below on how to enable background graphics in Chrome:

https://i.sstatic.net/ZKTS3.png

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

Tips for handling CSS loading delays with icons in OpenLayers markers

When using openlayers (v4.6.4) with font-awesome as marker icons, the icons do not display upon first load (even after clearing cache and hard reload). Instead, I see a rectangle resembling a broken character. It is only on the second load that they appear ...

javascriptcssfont-awesomeopenlayers-3

Is React-Router-DOM failing to generate routes as expected?

I recently followed a tutorial on setting up Auth0 on a basic create-react-app. At the moment, my project only consists of authentication and routing features. Everything was working perfectly when I was developing in localhost: / directed to /home, disp ...

javascriptreactjsauthenticationauth0react-router-dom

Our website features a dynamic functionality where users can select from two dropdown lists with identical values. Upon selecting multiple values from the first dropdown, the corresponding values in

When selecting multiple values from the first dropdown list, the second dropdown list will automatically have the same value selected as the first dropdown. ...

javascriptjqueryhtmljspbootstrap-4

When a jQuery click event is triggered, the event.target will return the child element that was clicked within the

When I have a jQuery click event assigned to a hyperlink that contains an image, each with separate ids, I expect clicking the hyperlink to trigger the code event.target.id, returning the hyperlink's id. However, it actually returns the image's i ...

javascriptjqueryhtmleventsjquery-events

Adding a new path to the end of an existing path using Ui-router

For my oAuth website, users will initially land on the /core/login path. However, I've noticed that when state changes occur from this page, the URLs are being appended to it. For example, if a user accesses the Reset Password feature with a state URL ...

angularjsroutesangular-ui-router

"Eliminate a specified range of characters from a string using JavaScript

I am currently working on a JavaScript function that will remove specific characters from a string. I have tried various methods such as `string.slice()`, `string.substr()`, and `string.substring()`, but what I really need to do is remove everything before ...

javascriptstringfunction

Developing a Typescript module, the dependent module is searching for an import within the local directory but encounters an issue - the module cannot be found and

After creating and publishing a Typescript package, I encountered an issue where the dependent module was not being imported from the expected location. Instead of searching in node_modules, it was looking in the current folder and failing to locate the mo ...

javascriptnode.jstypescriptnpmnode-modules

Execute a jQuery function only after a form has been submitted for the first time

In the same webpage, I have three lists in HTML format. Whenever an option is selected from the first list, it triggers the population of the second list based on the selection. Similarly, the third list is populated based on the selection from the second ...

javascriptphpjqueryhtmlforms

Using multi-dimensional JSON arrays for posting requests through Ajax

Is it possible to serialize HTML fields in a multi-dimensional array format for AJAX post transmission? I tried using serializeArray but it only formats the first level of the array. The data I need to serialize includes name/value pairs like: name="cus ...

phpjqueryajaxarraysjson

The ellipsis styling is being ignored

Check out the code provided below. It pertains to the text box located in the top right corner, which reveals a drop-down box when clicked. My intention is for long text in this box to be truncated with ellipsis using text-overflow:ellipsis. From my unders ...

htmlcsstwitter-bootstrapbootstrap-4

Attempting to align two distinct divisions next to each other

Here is the updated code snippet: <Grid container justify="space-between" alignItems="flex-start" direction="column" xs spacing={5} style={{ padding: 10, }}> <ParamSelection/> { state.select ...

cssreactjsgridmaterial-ui

Attempting to use Vue.js for playing MP3 files

Motive: My objective is to incorporate a background sound into my project using a local file that can be played and paused. While loading an external URL file works fine and allows for play/pause functionality, I am encountering issues with the local fil ...

javascriptvue.jshtml5-audio

Displaying an element as a dropdown menu on PrimeVue

I have a challenge with rendering a Dropdown using PrimeVue with the given script: <template lang="pug"> Dropdown#tag(v-model="tag" :options="tags") </template> <script setup> import axios from 'axios&a ...

javascriptvue.jsprimevue

Finding elements based on their class can be accomplished by using XPath

Can you show me how to effectively utilize the :not selector to choose elements in a scenario like this: <div class="parent"> <div class="a b c"/> <div class="a"/> </div> I am trying to select the div with only the class & ...

javahtmlxmlseleniumxpath

Embedding complex JSON information into an HTML dropdown menu

Here is a JSON string that I am working with: { "electronics": { "cameras": [ "sony", "nikon", "canon" ], "TV": "none", "laptop": [ "hp", "apple", "sony" ] }, "home": { "furniture": [ ...

htmljsonangularjstwitter-bootstrap

Enhance your interface with stunning JQuery code snippets

We are in the process of developing a web application that will be fully 2.0 compliant (utilizing AJAX and more). Although I am primarily a rich-client and server-side developer, my knowledge of Javascript is limited to a functional level. However, based ...

jqueryajaxuser-interface

Utilizing Angular to integrate with an external API

I have encountered an issue while trying to connect to the Expedia API. In order to do so, I need an API key and ID. Initially, I utilized JSONP for this connection but ran into a bug causing problems. Additionally, storing my API key in JavaScript poses ...

javascriptphpangularjsajax

Using .change(); in JavaScript code with jQuery does not trigger a function

Here we have a generic code example for a jQuery function: $(document).ready(function() { if (something) { // This does something } else if (something else) { // This does something else } else { // And this does somethin ...

javascriptjqueryfunctionasp.net-mvc-4

KnockoutJS - Struggling to bind model from simple JSON array

I've been working on an application that relies on a static JSON array, without the support of a backend service. I've been attempting to bind this JSON array to the page using KnockoutJS. Although I can successfully load the JSON array and creat ...

javascriptarraysjsonknockout.js

A guide on handling POST response body parsing in NodeJS

const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(bodyParser.urlencoded({extended: true})); app.get("/", function(req, res){ res.sendFile(__dirname + "/index.html"); }); app.post("/", function(r ...

javascripthtmlnode.jsexpress