The appearance of a printed webpage does not match what is shown in Google Chrome's Print Preview feature

I have encountered a strange issue that has me stumped. I need the webpage in my current project to be completely printable, but I'm facing difficulties. While the signature field and note field (with the text "erererer") display perfectly in Google Chrome's print preview, they do not print correctly when using the browser. The note field only shows the border without any content, while the signature field omits the actual signature. Interestingly, saving the document as a PDF from Chrome and then printing it produces the desired result. However, when attempting to print directly from Firefox, the signature area prints accurately, but the note field still only displays the outer border.

Any suggestions on how to troubleshoot this issue would be greatly appreciated.

Thank you in advance for your help!

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

cssgoogle-chromeprinting

Answer №1

For precise and dependable printability, utilizing iText and PDF is the ideal solution. By converting the page into a PDF format, it will display flawlessly in the browser and print exactly as intended.

HTML can often be imprecise, containing marks (such as page numbers) from the browser and potentially experiencing glitches.

Check out iText for both open-source and commercial versions, with an older free version also available. Find more information on the latest non-AGPL version here: What is the latest version of iText that is not AGPL?

If you encounter any issues with your note field, consider the possibility of unusual backgrounds, non-standard styling, or missing fonts. Simplify by using a plain vanilla table format.

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

Create a circular status button that overlays on top of another element using CSS

Looking to enhance my CSS skills! Seeking advice on creating a status button that changes color based on chat availability and positioning it on top of another button. https://i.sstatic.net/iU8wi.png ...

htmlcss

What is the best way to add several icons at once?

Is there a way to insert multiple star icons directly below the review text? I attempted to use pseudo elements to add the icons, but I could only insert one icon when I actually need to include multiple icons. Here is what I have tried so far: .review:: ...

htmlcss

Use CSS3 and jQuery.validate to highlight mandatory fields in red

I've been attempting to change the color of required fields in a form to red, but so far I haven't had any success. Here is the form code and the CSS that I have experimented with. contact.html <h2>Send us an ...

csshtml

Transform the scrollbar appearance on hover. Implement this feature using React and CSS with Material-UI

Within my React app, I am facing an issue with a scrollbar appearing in multiple lists. The global CSS being used within Material-UI is as follows: MuiCssBaseline: { ...theme.overrides?.MuiCssBaseline, '@global': { '@font-fa ...

cssreactjsmaterial-ui

Adjust the width of a box-shadow using percentage values in CSS

As we work on developing our tool according to the provided design, we are facing a challenge in drawing a line within a table row using box-shadow. The requirement is to have the line cover only 30% of the row width, rather than spanning across the entire ...

htmlcss

The div element displays a vertical scrollbar exclusively

Can you explain why the div is only displaying a vertical scrollbar? Although the canvas is larger than the div in both dimensions: div { padding-top: 2px; height: 709px; width: 889px; overflow: auto; } <div> <canvas width="1405" sty ...

htmlcsscanvas

Autoit script fails to run in Chrome web browser

Here is the code snippet for uploading files using Firefox (.au3 file): ControlFocus("File Upload","","Edit1") ControlSetText("File Upload","","Edit1","C:\Users\chaithu\Desktop\fileupload.html") ControlClick("File Upload","","Button1") ...

google-chromeseleniumautoit

Issue with Angular/Chrome: The filter pipe is not able to be located

Even though this topic has been covered before, I have not found any satisfactory solutions. Here is my approach: play.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; impor ...

angulartypescriptgoogle-chromefilterpipe

Can the CSS color of struts2-jquery-grid-tags be modified?

Is there a way to customize the CSS style of my Struts2 jQuery grid tags? I'm having trouble adjusting the font size of the header layer. Can someone please advise on how to change the style, color, and other formatting of the grid similar to regular ...

javascriptjquerycsshtmlstruts2

Guide to centering Embed horizontally with Bootstrap 5

My goal is to create a centralized input with an image positioned above it. I have been following the guidelines provided in the position documentation, but the image still does not align horizontally: https://i.sstatic.net/awWxL.png Here's the code ...

htmlcssbootstrap-5

Displaying Hierarchical Data with AngularJS and ng-repeat

Recently, I've been working on finding an elegant solution to represent hierarchical data in my application. Specifically, I have implemented a slide effect for bootstrap badges that showcase sub-categories using AngularJS. With some guidance from th ...

javascriptcssangularjstwitter-bootstrap

Struggling to implement a Rock Paper Scissors game using HTML, CSS Bootstrap4, and JavaScript, specifically facing challenges in getting the function to select a new image

Recently, in my coding class, we were tasked with creating a program that would display images of dice and generate random numbers when the refresh button was clicked. To practice using querySelector and setAttribute, I decided to expand on the lesson by i ...

javascriptcsshtmlbootstrap-4

How can I align the CSS Horizontal Menu directly under the parent menu instead of its current incorrect x-position?

I am working on creating a horizontal drop-down menu using CSS. However, I'm facing an issue where the submenu either appears all the way to the left of the website (when I use position: absolute) or directly to the left of the menu (when set to posit ...

cssmenupositioning

Data displayed in a table-like format

Is there a way to achieve this layout view image here (currently done using tables) while maintaining semantic markup? I believe the best tag for this would be dl. Each cell should have the height of its corresponding row. EDIT: The left column contains d ...

htmlcssxhtmlsemantic-markup

In Mobile View, I want to swap out my current image for text to keep it hidden

I am attempting to include text that is only visible in Mobile View as a replacement for my logo. Below is the code I am using: CSS: @media only screen and (max-width:1024px) { header .logo { display: none; } header .logo a { display: non ...

htmlcssresponsive-design

The value within the style.setProperty function does not get applied

I have a progress bar that dynamically increases based on user input: <div class="progressBarContainer percentBar"> <div class="progressBarPercent" style="--width:${gPercent}" id="${gName}-pbar">< ...

javascripthtmlcssdocument

What's the best way to add two distinct colors as background for a header with css?

h2 {background-color:#C61236; color:#FFFFFF; font-size:medium; line-height:1.5; text-indent:20px;} Although the current setup looks good, I am looking to incorporate a new color block at the start of the text. I'm not sure what steps to take nex ...

css

jQuery automatic slider for seamless transitions

I am in need of assistance with the coding for a website I'm currently constructing at www.diveintodesign.co.uk/ChrisMcCrone/index.html The coding being used is sourced from http://jquery.malsup.com/cycle/ The central large image functions as a slid ...

javascriptjqueryhtmlcss

Display the report produced from PHP code

Similar Question: Generate PDF report from php I am currently developing a PHP/mySQL database application for a client. The project involves generating dynamic reports, which the client's staff will need to print out. However, the client prefers ...

phpprintingreportgenerated

What is the best way to dynamically update styleUrls or style properties in Angular?

One of my goals is to give users the ability to customize colors and certain styles within my Angular application. I am thinking about creating a structure like this: Structure: component-one   folder-with-css-files     style-for-component-1-fo ...

cssangularstyled-components