[dompdf] dompdf and css and image

1,752 views
Skip to first unread message

bsquare

unread,
May 3, 2010, 11:25:12 AM5/3/10
to dompdf
Hi

I have big problems with the generation of pdf using dompdf 5 or 6,
and I can't fixe them. So I need your help.
With Dompdf 5 : the background image doesn't show up, the layout is
not good (all the div elements are displayed as if there was no css),
the images have their right size. Both for IE and FF.
With Dompdf 6 : the background image doesn't show up, the layout
seems correct, the images are very small (2mm) with FF and very big
(the size of the image file) with IE.

If someone can help me because I need really to fixe the generation of
PDF using Dompdf whatever the version.

With another projet, the background image is there, the layout is
correct but I have red cross for images.

Thanks for your help.

--
You received this message because you are subscribed to the Google Groups "dompdf" group.
To post to this group, send email to dom...@googlegroups.com.
To unsubscribe from this group, send email to dompdf+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/dompdf?hl=en.

BrianS

unread,
May 3, 2010, 10:43:05 PM5/3/10
to dompdf
Lots of unknowns at this point. I can think of no reason that would
cause the images to have differing sizes depending on the web browser.
Your background images may not be showing up depending on how you load
the HTML document and how you reference the image (e.g. is DOMPDF
looking on the local file system when it should be going through your
web server?). Do you receive any PHP errors?

It would help to see a sample of the HTML document that's giving you
problems.

Also, if you can get it working I would recommend the 0.6.0 release,
even in it's current beta stage it tends to do a much better job of
rendering.

Béatrice Barbier

unread,
May 4, 2010, 3:34:16 AM5/4/10
to dom...@googlegroups.com
Hi
I give you the html I have in the post (because it goes with javascript),
the file to make the pdf and the pdf I get.
The script javascript is :
function creer_pdf(){
remove_event();
var Headers = '<HTML><HEAD></HEAD><BODY>';
var Footers = "</body></html>";
var data
="html="+Headers+escape(getId("edition").innerHTML)+Footers+"&name="+modele;

var pagePHP="makePDFv2.php";
var xhr_object = varAjax();
var someDate = new Date( );

// On ouvre la requete vers la page désirée
xhr_object.open("POST", pagePHP+"?"+someDate.getTime(), false);
xhr_object.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhr_object.send(data);

if (xhr_object.status!=200){
alert(xhr_object.responseText);
}
}
I don't receive PHP errors.
I use dompdf6.
Thank you for your help.


--------------------------------------------------
From: "BrianS" <eclect...@gmail.com>
Sent: Tuesday, May 04, 2010 4:43 AM
To: "dompdf" <dom...@googlegroups.com>
Subject: [dompdf] Re: dompdf and css and image
A4POST.html
A4.pdf
makePDFv2.php

Béatrice Barbier

unread,
May 6, 2010, 7:31:35 AM5/6/10
to dom...@googlegroups.com
Hi

Good news : I found the solution for the images. I resize them and now they
appear in the PDF.
I still have a problem with the background image.
Do you have any idea to solve that problem ?
Here's the code I use :
getId(lastZoneClic).style.backgroundImage = 'url("'+
xhr_object.responseText +'")';
The xhr_object.responseText is the image resized.
Thank you for your help.

--------------------------------------------------
From: "BrianS" <eclect...@gmail.com>
Sent: Tuesday, May 04, 2010 4:43 AM
To: "dompdf" <dom...@googlegroups.com>
Subject: [dompdf] Re: dompdf and css and image

Béatrice Barbier

unread,
May 7, 2010, 10:47:53 AM5/7/10
to dom...@googlegroups.com
Nobody to help me !

One more information for my problem.
If I do : getId(lastZoneClic).style.backgroundColor = "red"; I have a
background red when I do the PDF.
If I do : getId(lastZoneClic).style.backgroundImage = 'url("' +
xhr_object.responseText + '")'; I still have nothing in background.

I have been looking for days to find a solution but I have no.
Any help, please ?

--------------------------------------------------
From: "BrianS" <eclect...@gmail.com>
Sent: Tuesday, May 04, 2010 4:43 AM
To: "dompdf" <dom...@googlegroups.com>
Subject: [dompdf] Re: dompdf and css and image

Fabien Ménager

unread,
May 7, 2010, 11:50:33 AM5/7/10
to dompdf
Is your request asynchronous ? If so, you won't have the responseText
right after calling send. You need to set a callback event that will
be called when getting the response from server.
Do you use a Javascript framework to do this ? (like jQuery or
PrototypeJS). If not, I strongly suggest you to adopt one.

On 7 mai, 16:47, Béatrice Barbier <beatrice.barb...@free.fr> wrote:
> Nobody to help me !
>
> One more information for my problem.
> If I do : getId(lastZoneClic).style.backgroundColor = "red"; I have a
> background red when I do the PDF.
> If I do : getId(lastZoneClic).style.backgroundImage = 'url("' +
> xhr_object.responseText + '")'; I still have nothing in background.
>
> I have been looking for days to find a solution but I have no.
> Any help, please ?
>
> --------------------------------------------------
> From: "BrianS" <eclecticg...@gmail.com>
> For more options, visit this group athttp://groups.google.com/group/dompdf?hl=en.

Béatrice Barbier

unread,
May 7, 2010, 12:02:03 PM5/7/10
to dom...@googlegroups.com
Thank you for your answer.
Here's the fonction I use.

function putImage(who){
if(lastZoneClic == 'format'){
var xhr_object = varAjax();
xhr_object.open("POST", "Redim_image.php", false);
xhr_object.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr_object.send( "url=" + who + "&hauteur=" +
getId(lastZoneClic).offsetHeight + "&largeur=" +
getId(lastZoneClic).offsetWidth );
if (xhr_object.status!=200){
alert(xhr_object.responseText);
}else{
//getId(lastZoneClic).style.backgroundImage = 'url("' +
xhr_object.responseText + '")';
getId(lastZoneClic).style.backgroundColor = "red"; MARCHE
}
}
I don't use Jquery or PrototypeJS.
I have no problem with images, only with backgroundImage.
And I really don't know what to do.
Thanks for your help.
--------------------------------------------------
From: "Fabien Ménager" <fabien....@gmail.com>
Sent: Friday, May 07, 2010 5:50 PM

BrianS

unread,
May 13, 2010, 11:14:22 PM5/13/10
to dompdf
I'm not clear on something ... does xhr_object.responseText contain a
URL to the image or the image itself?

On May 7, 10:47 am, Béatrice Barbier <beatrice.barb...@free.fr> wrote:
> Nobody to help me !
>
> One more information for my problem.
> If I do : getId(lastZoneClic).style.backgroundColor = "red"; I have a
> background red when I do the PDF.
> If I do : getId(lastZoneClic).style.backgroundImage = 'url("' +
> xhr_object.responseText + '")'; I still have nothing in background.
>
> I have been looking for days to find a solution but I have no.
> Any help, please ?
>
> --------------------------------------------------
> From: "BrianS" <eclecticg...@gmail.com>
> For more options, visit this group athttp://groups.google.com/group/dompdf?hl=en.

Béatrice Barbier

unread,
May 14, 2010, 1:59:27 AM5/14/10
to dom...@googlegroups.com
Hi

I really don't know !
I thought I had the solution : I put the style outside the div in the html
file. And that way, I have the image on background with FF. But with IE it
doesn't work. The style is not applied if it is outside the div.
What I am trying to do is to pass in javascript all the information being in
a div (image, text, background, size, position...) to generate a pdf with
dompdf.
I hope it helps you to understand my problem.
Thanks to help me.

1. I put on the html file :
- images
xhr_object.send( "url=" + who + "&hauteur=" +
getId(lastZoneClic).offsetHeight + "&largeur=" +
getId(lastZoneClic).offsetWidth );
- background
getId(lastZoneClic).style.backgroundImage = 'url(' + xhr_object.responseText
+ ')';
It works fine : I can see the file on the screen with everything on.

2. I do the pdf so I send all the information in a fonction javascript :
var Headers = "<HTML><HEAD></HEAD><BODY>"
var Footers = "</body></html>";
var data
="html="+Headers+escape(getId("edition").innerHTML)+Footers+"&name="+modele;var
pagePHP="makePDFv2.php"; // the file with the instructions for dompdf
I lost the background image.
--------------------------------------------------
From: "BrianS" <eclect...@gmail.com>
Sent: Friday, May 14, 2010 5:14 AM

BrianS

unread,
May 14, 2010, 10:22:50 PM5/14/10
to dompdf
Can you supply the contents of the HTML document that's being
processed (the "data" var)? I think this would help in determining why
DOMPDF is having trouble.
> From: "BrianS" <eclecticg...@gmail.com>

Béatrice Barbier

unread,
May 15, 2010, 12:38:41 AM5/15/10
to dom...@googlegroups.com

Hi

var data
="html="+Headers+escape(getId("edition").innerHTML)+Footers+"&name="+modele;
and in the file the information which are in the post.
Thank's
--------------------------------------------------
From: "BrianS" <eclect...@gmail.com>
Sent: Saturday, May 15, 2010 4:22 AM
A4POST.html

BrianS

unread,
May 15, 2010, 1:23:15 AM5/15/10
to dompdf
Sorry, you did post that before, didn't you.

I think there might possibly be one or more bugs here. Beyond the
background image issues, the inline images are definitely having
problems.

So two things to get you moving forward until we have a chance to take
a closer look. 1) If you just modify your headers slightly by adding
an empty style element the background appears to render correctly. 2)
It's always a good idea to specify your character encoding, especially
when you're using characters outside the standard ASCII.

Try the following header:

var Headers = "<HTML><HEAD><meta http-equiv="Content-Type"
content="text/html; charset=utf-8"><STYLE></STYLE></HEAD><BODY>";




On May 15, 12:38 am, Béatrice Barbier <beatrice.barb...@free.fr>
wrote:
> Hi
>
> var data
> ="html="+Headers+escape(getId("edition").innerHTML)+Footers+"&name="+modele ;
> and in the file the information which are in the post.
> Thank's
> --------------------------------------------------
> From: "BrianS" <eclecticg...@gmail.com>
>  A4POST.html
> 1KViewDownload

Béatrice Barbier

unread,
May 15, 2010, 1:44:24 AM5/15/10
to dom...@googlegroups.com
Thank you very much !!!
It works even under IE.
I spent so much time on it and it was so simple. But any way, it works. I
just have to put a margin in order to have a white margin on the four sides
and it will be perfect.
That forum and your help were very useful and thank you for being there.
Have a nice week end
Mine will be better now.


--------------------------------------------------
From: "BrianS" <eclect...@gmail.com>
Sent: Saturday, May 15, 2010 7:23 AM
A4.pdf
A4IE.pdf

Béatrice Barbier

unread,
May 15, 2010, 1:58:09 AM5/15/10
to dom...@googlegroups.com
Just one more question :
If you get red cross instead of the images, what could be the problem ?
we thought it was a problem for the address of the image :
on the html we have : img src="/ckfinder/userfiles/tmpimg/neige.jpg
and in the fonction to generate the pdf :
var html_ = getId("rendu").innerHTML;
html_ = Remplace(html_,'src="','src="http://projet605.com');
var data ="html="+Headers+escape(html_)+Footers+"&name="+modele;
And we have the red cross only for the image, the background is OK.
Any idea ? Thanks

--------------------------------------------------
From: "BrianS" <eclect...@gmail.com>
Sent: Saturday, May 15, 2010 7:23 AM

BrianS

unread,
May 18, 2010, 9:24:46 PM5/18/10
to dompdf
Have you confirmed that the image is accessible after the replacement?
http://projet605.com/ckfinder/userfiles/tmpimg/neige.jpg

Does your web server have write access to the temporary directory
specified by DOMPDF_TEMP_DIR? Images that specify a full URL are
downloaded to the temp directory.


On May 15, 1:58 am, Béatrice Barbier <beatrice.barb...@free.fr> wrote:
> Just one more question :
> If you get red cross instead of the images, what could be the problem ?
> we thought it was a problem for the address of the image :
> on the html we have : img src="/ckfinder/userfiles/tmpimg/neige.jpg
> and in the fonction to generate the pdf :
>                 var html_ = getId("rendu").innerHTML;
>         html_ = Remplace(html_,'src="','src="http://projet605.com');
>         var data ="html="+Headers+escape(html_)+Footers+"&name="+modele;
> And we have the red cross only for the image, the background is OK.
> Any idea ? Thanks
>
> --------------------------------------------------

Béatrice Barbier

unread,
May 19, 2010, 1:32:34 PM5/19/10
to dom...@googlegroups.com
No, the address must be the one of the server that means it begins with
var/www/.
So now it works for the problem of the red cross.

The solution : var Headers = "<HTML><HEAD><meta http-equiv="Content-Type"
>> > content="text/html; charset=utf-8"><STYLE></STYLE></HEAD><BODY>";
was the one which solved my problem with the background image.

Everything is almost perfect.
I still have a problem with the pdf.
when I have words with accent (é, à, è..), the phrase is not displayed.
Do you have any idea of the problem and so of the solution ?
Thanks.


--------------------------------------------------
From: "BrianS" <eclect...@gmail.com>
Sent: Wednesday, May 19, 2010 3:24 AM

Béatrice Barbier

unread,
May 19, 2010, 2:53:53 PM5/19/10
to dom...@googlegroups.com
OK I found the solution pour the accent.
I changed that line : var Headers = "<HTML><HEAD><meta
http-equiv="Content-Type"
>>> > content="text/html; charset=utf-8"><STYLE></STYLE></HEAD><BODY>";
with var Headers = "<HTML><HEAD><STYLE></STYLE></HEAD><BODY>";
and now it works.

--------------------------------------------------
From: "Béatrice Barbier" <beatrice...@free.fr>
Sent: Wednesday, May 19, 2010 7:32 PM
To: <dom...@googlegroups.com>
Subject: Re: [dompdf] Re: dompdf and css and image

BrianS

unread,
May 25, 2010, 1:50:56 PM5/25/10
to dompdf
I'm not sure why removing the content type header would fix that.
DOMPDF should be reading it correctly ... but this functionality does
need a bit more work. Either way, I'm glad you got everything working.

On May 19, 2:53 pm, Béatrice Barbier <beatrice.barb...@free.fr> wrote:
> OK I found the solution pour the accent.
> I changed that line : var Headers = "<HTML><HEAD><meta
> http-equiv="Content-Type">>> > content="text/html; charset=utf-8"><STYLE></STYLE></HEAD><BODY>";
>
> with var Headers = "<HTML><HEAD><STYLE></STYLE></HEAD><BODY>";
> and now it works.
>
> --------------------------------------------------
> From: "Béatrice Barbier" <beatrice.barb...@free.fr>
> Sent: Wednesday, May 19, 2010 7:32 PM
> To: <dom...@googlegroups.com>
> Subject: Re: [dompdf] Re: dompdf and css and image
>
>
>
> > No, the address must be the one of the server that means it begins with
> > var/www/.
> > So now it works for the problem of the red cross.
>
> > The solution : var Headers = "<HTML><HEAD><meta http-equiv="Content-Type"
> >>> > content="text/html; charset=utf-8"><STYLE></STYLE></HEAD><BODY>";
> > was the one which solved my problem with the background image.
>
> > Everything is almost perfect.
> > I still have a problem with the pdf.
> > when I have words with accent (é, à, è..), the phrase is not displayed.
> > Do you have any idea of the problem and so of the solution ?
> > Thanks.
>
> > --------------------------------------------------
> > From: "BrianS" <eclecticg...@gmail.com>
> ...
>
> read more »- Hide quoted text -
>
> - Show quoted text -
Reply all
Reply to author
Forward
0 new messages