javascript - Chrome not loading Print Preview completely on first attempt - Stack Overflow

admin管理员组

文章数量:1335386

I'm using classic javascript window.print() function that is bound to a button to print a page. When I use it the first time after the page loads, it loads the background and the CSS but doesn't load the text for some reason.

When I close the Print Preview (not reloading the page) and click the button again, it loads the missing text pletely. This only happens on Chrome, while in Firefox it loads the text on first try without any problems.

I've tried using setTimeout, and window.on('load'...) functions, but didnt help. I'm using a separate CSS file for page printing. What can be the cause of this problem?

I'm using classic javascript window.print() function that is bound to a button to print a page. When I use it the first time after the page loads, it loads the background and the CSS but doesn't load the text for some reason.

When I close the Print Preview (not reloading the page) and click the button again, it loads the missing text pletely. This only happens on Chrome, while in Firefox it loads the text on first try without any problems.

I've tried using setTimeout, and window.on('load'...) functions, but didnt help. I'm using a separate CSS file for page printing. What can be the cause of this problem?

• javascript
• jquery
• html
• css
• google-chrome

Share Improve this question Follow asked Nov 26, 2014 at 12:29 purfufnapurfufna 10111 silver badge66 bronze badges 1

• I won't add it as an answer as I'm not certain it will solve your problem but try using the easy-print JS library here: github./M1ke/easy-print (there's an extra version for jQuery too). It uses an iframe to improve loading of the print stylesheet on a link. If this works for you let me know and I'll add it as an actual answer. – M1ke Commented Nov 26, 2014 at 12:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Had quite same issue. (no printing on first try on windows chrome browser)

Solved it by removing

@import url(http://fonts.googleapis./css?family=Open+Sans:400,300italic,600);

from print.css and take another font for printing.

This is very old but still relevant question as Chrome as of 2023 still works in this way. There are multiple factors that can impact this Chrome behaviour and lead to this problem.

The root cause is that "Print Preview" is a separate renderer that renders the whole printing content from the scratch, including external resources and seems to have its own cache. That is why we need a second click - because on the first one a font gets cached. It also seems to incorrectly render some CSS properties like display: none that leads to multiple abnormalities like random non-rendered elements when DevTools are open. So here is summary of key points I found impacted print and print preview:

1. Replace display: none; to height: 0px; overflow: hidden; border: none; if hidden iframe is used to create printing content

2. Wait until the whole content to print is created before calling contentWindow.print(). This is most mon remendation and this is how it does by print.js (they always wait 1sec before calling print). It helps when the page content (not fonts or scripts) like images needs time to be downloaded/rendered.

3. For the Google font (and probably for other long-loading resources - I had been finding mentions that large CSS can cause the same problem) the solution is: (1) Download fonts locally as woff2 (2) reference them using 'preload' key like this:

       const preloadRegularFont = doc.createElement('link');
       preloadRegularFont.rel = 'preload';
       preloadRegularFont.href = '../fonts/nunito-regular.woff2';
       preloadRegularFont.as = 'font';
       preloadRegularFont.type = 'font/woff2';
       preloadRegularFont.crossOrigin = 'anonymous';
       doc.head.appendChild(preloadRegularFont);
   

   and (3) reference them again normally using @font-face.

Then, print and preview starts to work normally. Interesting, that (3) does not work without (1).

"This only happens on Chrome, while in Firefox it loads the text on first try without any problems."

May be your chrome browser have some problem.. Once try re-installing the browser.. It may solve your problem...

本文标签： javascriptChrome not loading Print Preview completely on first attemptStack Overflow