Javascript print in a new window won't display images

Question

0.00/5 (No votes)

See more:

I'am struggling with a problem and I was hoping you can help me. I created a function that prints out data from inputs in a page. However, logo I am using on a print page won't be displayed like as if a link to the image is broken. Any thoughts?

Here is the code:

XML

function printReport() {
    win=null;
    var vin = $("input[name='vin']").val();
    var make = $("select[name='make']").val();
    var printData = '<table width="960" border="0" align="center"> <tr> <td colspan="2"><img src="http://localhost/site/images/logo_print.png" width="291" height="109" /></td> </tr> <tr> <td colspan="2"><div class="print-title" align="center">Service report </div></td> </tr> <tr> <td width="196">Vin:</td> <td width="754"><b>'+ vin +'</b></td> </tr> <tr> <td>Make:</td> <td><b>'+ make +'</b></td> </tr> </table>';
    win = window.open();
    self.focus();
    win.document.open();
    win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
    win.document.write("body, td { height: 25px; font-family: 'PT Sans', sans-serif; font-size: 17px; color:#333333;} .logo{ background:url(http://localhost/clubdfrance/images/logo_print.png); background-repeat:no-repeat; display:block; width:291px; height:109px;} .print-title{ display:block; margin-top:10px; font-size: 25px; }");
    win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
    win.document.write(printData);
    win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
    win.document.close();
    win.print();
    win.close();
}

Posted 20-Aug-13 6:49am

Parthanaux

Add a Solution

Comments

fjdiewornncalwe 20-Aug-13 12:52pm

Have you verified that the image src url works properly? Copy the url in your generated html and then paste it into the header bar of your browser. If the image appears then the url is ok. If not, then you have found your problem.

Parthanaux 20-Aug-13 13:25pm

I did and it open the image.

Sergey Alexandrovich Kryukov 20-Aug-13 13:29pm

It looks like you show some images only on print, not on page. Is it really so? With exception of the non-standard IE feature mentioned in Solution 1, there are no reason for treating print in a way different from page rendering. Your image(s) could simply be missing, URL misspelled, something like that. Please check up.
—SA

3 solutions

Solution 1

You may need to enable "Print background colors and images" if you are using IE. Check below link

Background Colors and Images Are Not Displayed in Report Prints[^]

Posted 20-Aug-13 7:07am

Mahesh Bailwal

Comments

Parthanaux 20-Aug-13 13:25pm

Unfortunately, this is not my problem. Images won't be displayed in any browser...

Mahesh Bailwal 20-Aug-13 13:32pm

you are not able to see logo image in print or in browser window?

Sergey Alexandrovich Kryukov 20-Aug-13 13:39pm

There are can be different reasons for that, but if OP says the problem looks the same in different browser, this should be really so. I would question the whole approach. Please see the suggested alternative in my answer.
—SA

Solution 3

ddddddddddddffffffffffffffffffffffffffffffffffffffffffddddddddddddddddd

Posted 16-Jan-14 1:49am

Member 10527769

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-08-20T07:36:00

Please see my comment to the question.

I would suggest an alternative approach to the problem. Printing should be up to the user who probably knows better what to print and what not. It was a tradition to provide a "printer-friendly" page on user request (generate it on some anchor click), which you can do, but this design feature is getting obsolete while more and more complete implementation of CSS Media Types is emerging in browser's layout engine implementations. Please see my past answer:
How to Print a Invoice[^].

When the user prints the page or views the "Print preview", your page style, including layouts, changes accordingly, in a printer-friendly manner, but all the content, including images, remain the same. Unless you change visibility of some elements in your "@media print" styles, which is yet another stylistic element you can use for printing. But nothing will be disappearing by any mysterious reasons. :-)

—SA