Images are not displaying on the browser when printing

Is there a way to display specific content when using the printThis jQuery plugin on my website? I've noticed that when I click on print_btn, images and <hr> elements are not included in the print. What could be causing this issue?

HTML

<button id="print_btn"></button>
<div class="elementBricka display" style="page-break-after:always">
    <div class="lkbLoggo"></div>
    <hr>
     ....

CSS

#elementBrickor{
    align-items: center;
}

.elementBricka{
    width: 9.614cm;
    height: 14.404cm;
    border: 1px solid;
    background-color: white;

    float: none;
    margin-left: auto;
    margin-right: auto;
}
.lkbLoggo{
    width: 9.182cm;
    height: 2.721cm;
    margin-top: 0.199cm;
    background-image: url("/img/lkb_logga2.png");
    background-repeat: no-repeat;
    background-position: center;
}

JS

$(document).ready(function () {
    $('#print_btn').click(function () {
        $('.display').printThis({
            debug: true,
            importCSS: true,
            importStyle: true,
            loadCSS: "/Data.css",
            pageTitle: false,
        });
    });
});

UPDATE

I have found the solution to my own question.
The issue is not related to "PrintThis".
It seems to be a browser compatibility problem.
By including !important in my CSS file where I load the image, I was able to resolve the issue.

javascriptjqueryhtmlcssprintthis

Answer №1

I found a way to resolve this issue by incorporating the following code:

-webkit-print-color-adjust: exact !important;

Answer №2

In most cases, images will not print because of a browser setting.

To resolve this issue, go to Tools / Internet Options / Advanced and ensure that "Print Background and Images" is enabled.

Unfortunately, the printThis plugin does not have a workaround for printing images.

If you want to attempt printing images using jQuery, you can follow this example: http://jsfiddle.net/8dXvt/626/


function newWindow() {
  var newWindow = window.open();
  var content = $("#toNewWindow").html();

  $(newWindow.document.body).html(content);
  setTimeout(function(){newWindow.print()}, 1500);
}

Answer №3

$('.display').printThis({
option='true'
});

give it a go

Answer №4

Unfortunately, I haven't figured out how to get "PrintThis" to print my images.

.lkbLoggo{
    width: 9.182cm !important;
    height: 2.721cm !important;
    margin-top: 0.199cm !important;
    background-image: url("/img/lkb_logga2.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

I discovered a workaround in CSS by adding !important after each line to make it display in the printout. However, I'm now looking for a way to make an entire class important instead of having to specify it on every line.

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

A step-by-step guide on setting up a confirmation pop-up message using Gravity Forms

Has anyone attempted to implement a pop-up confirmation message in Gravity Forms? I am also looking to prevent the form from disappearing after submission. By the way, I have selected text as the confirmation type in my Gravity Form settings because I do ...

javascriptjqueryajaxformsgravity-forms-plugin

Comparing arrays of objects based on their values rather than their indexes results in equality regardless of position within

I'm currently using the following version specifications: "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "@types/jasmine": "~2.8.3", Maybe it's a simple quest ...

javascriptangularecmascript-6jasmine

Uploading an image to an external drive using Lotus Notes

I'm currently working with Lotus Domino 8.5 and I need to find a way to upload images without utilizing the File Upload Control since it directly uploads files to the server's database. I believe there must be another method to upload images to a ...

jqueryajaxlotus-notes

PHP script failing to recognize data received from ajax script

Currently, I am facing an issue while trying to set up an ajax call to my php file for data insertion. The problem lies in the fact that the data I transmit is not being acknowledged. The variables in the php file which seem to be causing the trouble are: ...

phpjqueryajaxvariables

Show webpage on Next.js server side

With Next.JS 14, I am aiming to display a page for clients who request access via a browser. If the request comes from an alternate source, I would like to redirect them to another website. While I have successfully implemented the redirect function in t ...

javascriptnext.jsnextjs14

Why is my main.scss having trouble importing other files?

I am experiencing issues with importing my scss file. First, I created a file called main.scss and added some code to it. All the codes are functioning properly and showing up on the webpage. Next, I created two folders named settings and elements. In ...

csssass

Using jQuery to input a value that returns the [object Object]

While working with jQuery in asp.net, I encountered an issue where the value assigned to a hidden field (hfstockcode) is returning [object Object]. The console output shows v.fn.v.init[1]. How can I retrieve the correct value for the hidden field? $(docum ...

javascriptjqueryasp.net

Attempting to implement form validation on my website

Recently watched a tutorial on basic form validation on YouTube, but I'm encountering an issue where the error messages from my JavaScript file are not displaying on the website during testing. I have set up the code to show error messages above the l ...

javascripthtmlbootstrap-5

Rotating the face normal in ThreeJS, just not specifically on the floor

I am currently working on developing a house generator using a floorplan. The mesh generation process is running smoothly, but now I am faced with the task of flipping the normals on certain faces. buildRoomMeshFromPoints(planeScalar, heightScalar){ va ...

javascriptthree.jsprocedural-generation

Using Python's BeautifulSoup library to pull information from an HTML table

I need help extracting a table from a webpage. Here's the HTML and Python code using beautifulsoup that I've been trying with. It usually works for me, but this time it's coming up blank. Any insights are appreciated! <table> <thea ...

pythonhtmlbeautifulsoup

Design a floating text box similar to Gmail's style by incorporating Google's Material Design Lite

I have been utilizing the Material design lite library in an attempt to replicate the Floating text box feature seen in Gmail by Google. Despite not finding any official documentation on this particular component, I decided to experiment with the following ...

htmlcssmaterial-designmaterial-design-lite

The function of jQuery .on will not be effective when applied to elements that have been

Currently, I am experimenting with some functionality to trigger an action when hovering over a specific element (such as a link) in order to display something in the console. I came across this helpful answer here, which mentions that "you can define you ...

javascriptjquery

How can I define the PropType for an object containing a combination of strings and functions?

Trying to define a prop, which is an object of strings and functions. I set proptypes as component.propTypes = { propName: PropTypes.objectOf(PropTypes.oneOf([PropTypes.string, PropTypes.func]) } However, I encountered an error message stating that it r ...

javascriptreactjstypesmaterial-uireact-proptypes

AJAX list refresh, fetch additional items and tally

Looking for a solution to update the values of listUsernames and numUsernames after adding an item? Check out this scenario: <ul id='usernameList'> <li class='username'>John</li> <li class='username&apo ...

javascriptajaxjquery

The fixed table header is misaligned with the body columns' width

I was looking for a way to add a vertical scrollbar to my table, and I ended up wrapping the entire table in a div. The result was that the table head was fixed in position. Is there a simpler method to include a scrollbar in a table without affecting the ...

htmlcsshtml-table

Generate a list item that is contenteditable and includes a button for deletion placed beside it

I am attempting to create a ul, where each li is set as contenteditable and has a delete button positioned to the left of that li. My initial attempt looked like this: <ul id='list'> <li type='disc' id='li1' cl ...

javascriptjqueryhtmlcss

Trouble with Updating Graph from getJSON and Input Form

I've been trying to solve this problem all day. I am using getJSON() to fetch JSON data from a PHP file and then displaying it as a graph using DyGraphs. The PHP file works fine because I am able to generate an initial graph without passing any data t ...

phpjqueryjsongetjsondygraphs

Two Elements Linked Together

I'm facing an issue with my interconnected React components. Despite being separate entities, they appear to share some styling attributes which I find puzzling. The main problem lies in the footer component as it seems linked to another component, p ...

javascriptreactjs

Click-triggered Animation of Glyphicon

I'm attempting to create an animation for a glyphicon-refresh icon that rotates when clicked. I've been trying to achieve this effect using CSS3, but haven't had much success. Below is the code I've used: <a id="update" href="#"> ...

javascriptjquerytwitter-bootstrapcss

Registration form input field in ReactJS keeps losing focus with every keystroke

Currently, I am in the process of creating a registration form for a website. I have implemented the handleChange function to alter the input text in the regData state. However, I am encountering an issue where every time I type something into an input fie ...

javascriptcssreactjsregistration