CODEWITHSUNDEEP
htmlcssgoogle-chrome
Zsolt Tolvaly
Zsolt Tolvaly

Reputation: 3616

Chrome print preview error

I want to print a html page. The html page is developed by me, this page can be printed with mozilla, ie.

In Chrome: when pressing CTRL+P it brings up the preview window, but it says: "Print preview failed", and i can't print anything. In opera it doesn't brings up the print window, nor from pressing CTRL+P nor from Menu->Print, Safari prints a white page.

Do you have any ideas what could be wrong? What kind of error can cause this problem? Is there any error log for chrome, to figure out what is wrong?

EDIT

I tried removing html elements, css scripts, javascripts, and i found out that one of my css file is blocking the print preview, i will go one, and will try to remove blocks from the css, i hope i can find this way where is the error.

EDIT 2

No success... Is there a possibility, that the css is to large for the browser to compile it? the css has imports inside, i tried to remove them, but this doesn't resolved my problem... Any other suggestions?

EDIT 3 I have the following:

<link rel="stylesheet" href="/css/style.default.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print"/>

If I comment the first include, or change the media to screen for style.default.css then the preview is generated, but with missing css rules. The style.default.css is my global css, it has 17 other css imported into it this way:

@import url('jquery.ui.css');
@import ...

I have tried to comment the imports, and tried only with the css rules from that file. (If the error came from one of the imports, this should fix the problem), but this didn't fixed it, so i tried =the other way around, commenting the css rules, and try only with the imports, same result. Only success if i comment the whole file...

Any other suggestions? Somebody knows if chrome is logging somewhere such errors?

Upvotes: 13

Views: 20243

Answers (5)

Zied Hamdi
Zied Hamdi

Reputation: 2660

For me it was caused by chrome print unable to handle this div style that I use to display a progress circle: enter image description here

style={`background: radial-gradient(closest-side, ${bg} 40%, transparent 80% 100%),
                conic-gradient(${fg} ${progress}%, ${emptyBg} 0);
                width:${size}; height:${size}`}

I had to proceed by dichotomy to find out the origin in my page for creating resumes.

You can find more info about the bug here: https://learn.microsoft.com/en-us/answers/questions/edit/751546/comment/1316344?comment=question#comment-1316344

Upvotes: 0

PrimeModule
PrimeModule

Reputation: 41

I know that i might be a little bit late to the party but I hope that this would help others in future.

The problem with print previews are often connected with styling. Some properties could break down our preview, and we could spend long hours before we solve this issue.

Here are some most common attributes that could induce this bug: height, position, overflow. It's a must to remember that for printing:

  • height: 100%,
  • position: fixed/absolute/relative (in some cases),
  • overflow: hidden,

are 'the last nail in the coffin'.

None of container should have them set. For position you can use static, for height use fixed values or just leave an auto option. Always remember to set overflow: visible. Otherwise the thing we want to print could be hidden.

Also I have written a short article about printing in Ionic where I explained a topic a little bit more. You can find it here: http://blog.primemodule.com/print-style-sheets-in-ionic-framework/

Upvotes: 4

Zsolt Tolvaly
Zsolt Tolvaly

Reputation: 3616

Finally i found the error. 2 css rules have blocked the browser from generating the preview:

min-height: 100%;
height: 100%;

and

position: fixed;

Upvotes: 11

Wissam El-Kik
Wissam El-Kik

Reputation: 2525

As mentioned here, this problem won't be fixed (check the status of the bug).

The problem is related to your PDF reader. You most probably removed "Microsoft XPS document writer" or "Adobe PDF". You can solve the PDF reader problem here. Keep in mind that the Print Preview isn't linked to the Print functionality. You can still print the webpage without a Print Preview. In most of the browsers, the Print Preview isn't accurate. It's better to print the webpage to check the output.

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

A quick Google search returned this:

You may be seeing this if you disabled Chrome's PDF viewer and enabled Adobe's. Once you've done this, you will get a message as you describe. You can still get to your printer box by clicking on Advanced in the Print Preview screen as edvrde states.

Or you can disable Print Preview. You do this by:

  1. Right click on your Chrome shortcut
  2. Go to Properties
  3. In the Target field, go to the end of the file location and add:" --disable-print-preview". Please include the two spaces as well. In addition, as enystrom mentioned, put this outside of the quotes if you have them. In this way, it should look like: a. C:\Users[user name]\AppData\Local\Google\Chrome\Application\chrome.exe --disable-print-preview b. "C:\Users[user name]\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-print-preview (if you have quotation marks)
  4. Press OK.

If you are running Win 7 and have Chrome pinned to your taskbar you should remove it and to this to the Chrome icon you get to from your Start menu, then repin it to your taskbar.

Upvotes: 1

Related Questions