jspdf doesnt display html element width correctly #3154

gonztest · 2021-05-05T15:01:35Z

Hello all,

I'm currently trying to put a HTML element to PDF using the latest version. No success so far, the HTML is rendered in PDF but the width, which should be 100% of the PDF page width, is not displayed correctly.

Here's how it is being generated:

Here's how the HTML page looks in the browser:

My code:

const { jsPDF } = window.jspdf;

var doc = new jsPDF('p', 'pt','a4',true,true);
document.getElementById('log_container').style.height= document.body.scrollHeight;

doc.html(document.getElementById("log_container"), {
callback: function (doc) {
	doc.save();
},
x: 0,
y: 0
});

my css is this:

#log_container {}
#container {margin-top:12vw;position:relative;height:100%;  padding: 0;}
.bo {border:1px solid black;position:absolute;color:black;word-wrap: break-word;overflow:hidden;}
.f1 {width:25.7vw;}
.f2 {width:25.2vw;}
.f3 {width:14.2vw;}
.f4 {width:39.4vw;padding-right:1px;}
.gg {height:14mm;}
.g1	{width:4.7vw;margin:0;padding:0;}
.g2	{width:11.9vw;}
.g3	{width:64.2vw;}
.g4	{width:calc(4.6vw - 0px);}


.l {height:36mm;}
.m {height:30mm;}
.st {height:15mm;}
.s {height:calc(15mm - 1px);}
.xs {height:calc(6mm - 1px);}

.lp1 {left:4.7vw;}
.lp2 {left:calc(30.4vw + 1px);}
.lp3 {left:calc(55.6vw + 2px);}
.lp4 {left:calc(80.8vw + 3px);}
.lp5 {left:calc(9.4vw + 1px);}
.lp6 {left:calc(14.1vw + 2px);}
.lp7 {left:calc(26vw + 3px);}
.lp8 {left:calc(90.2vw + 4px);}

.tp1 {top:calc(10mm + 0px);}
.tp2 {top:calc(40mm + 1px);}
.tp3 {top:calc(25mm + 1px);}
.tp4 {top:calc(46mm + 1px);}

.tp5 {top:calc(52mm + 1px);}

.pl {padding-left:3px;}
.desc {font-size:8pt;margin-top:1mm;}
	.desc2 {font-size:8pt;}
.cont {font-size:16pt;font-weight:bold;}
.hi {margin-top:-8pt;}

.d_s2 	{width:5.3vw;}
.c_s2	{width:19.1vw;}

.fl {}

.rot {transform: rotate(270deg);}

._d1f1 {height:5mm;margin:1mm;width:calc(25.7vw - 2mm);background-color:pink;}
._d1f2 {height:5mm;margin:1mm;width:calc(25.2vw - 2mm);background-color:pink;}
._d1f3 {height:5mm;margin:1mm;width:calc(14.2vw - 2mm);background-color:pink;}
._d2f2 {margin:1mm;width:7vw;height:calc(4mm - 1px);background-color:pink;}
._d2f3 {margin:1mm;width:3.5vw;height:calc(4mm - 1px);background-color:pink;}
._d3f1 {margin:1mm;width:3.6vw;height:calc(4mm - 1px);background-color:brown;}
._d3f2 {margin:1mm;width:3.4vw;height:calc(4mm - 1px);background-color:pink;margin-left:-1mm;}
._d4f1 {margin:1mm;width:8.5vw;height:calc(4mm - 1px);background-color:pink;text-align:right;}
._d4f2 {margin:1mm;width:calc(8.7vw - 2mm);height:calc(4mm - 1px);background-color:pink;margin-left:-1mm;}
._d5f1 {margin:1mm;width:7.3vw;height:calc(4mm - 1px);background-color:pink;}
._d6f1 {margin:1mm;width:14.8vw;height:calc(4mm - 1px);background-color:pink;}
._d7f1 {margin:1mm;width:calc(64.2vw - 2mm);height:12mm;background-color:pink;}
._d8f1 {margin:1mm;width:calc(11.9vw - 2mm);height:12mm;background-color:pink;}

	._drot1 {margin:1mm;width:calc(4.7vw - 2mm);height:12mm;background-color:pink;writing-mode: vertical-rl;}

._c1 {height:28mm;margin:1mm;width:calc(25.7vw - 2mm);background-color:yellow;font-weight:bold;}
._c2 {height:22mm;margin:1mm;width:calc(25.2vw - 2mm);background-color:yellow;font-weight:bold;}
._c3 {height:7mm;margin:1mm;width:calc(14.2vw - 2mm);background-color:yellow;font-weight:bold;}
._c4 {margin:1mm;width:calc(18.2vw - 2mm);height:calc(4mm - 1px);background-color:yellow;margin-left:-1mm;font-weight:bold;}
._c5 {margin:1mm;width:calc(10.7vw - 2mm);height:calc(4mm - 1px);background-color:yellow;margin-left:-1mm;font-weight:bold;}
._c6 {margin:1mm;width:calc(7.4vw - 1mm);height:calc(4mm - 1px);background-color:yellow;margin-left:-1mm;font-weight:bold;}
._c7 {margin:1mm;width:8.5vw;height:calc(4mm - 1px);background-color:yellow;margin-left:-1mm;font-weight:bold;}
._c8 {margin:1mm;width:calc(17.8vw - 4mm);height:calc(4mm - 1px);background-color:yellow;margin-left:-1mm;font-weight:bold;}
._c9 {margin:1mm;width:calc(24.6vw - 2mm);height:calc(4mm - 1px);background-color:yellow;margin-left:-1mm;font-weight:bold;}

and the html:

<!-- TOPLOG CONTAINER -->	
<div id="container">	
<div id="log_container">
	<div class="f1 l bo lp1 tp1">
			<div class="_d1f1" id="d1f1">PLANVERFASSER:</div>
			<div class="_c1" id="c1"><?php echo $current_company;?></div>
		</div>
	<div class="f2 m bo lp2 tp1">
			<div class="_d1f2" id="d1f21">AUFTRAGGEBER:</div>
			<div class="_c2" id="c2"><?php echo $current_pag;?></div>
		</div>
	<div class="f2 xs bo lp2 tp2">
			<div class="_d3f1 fl" id="d3f1">Koord.</div>
			<div class="_d3f2 fl" id="d3f2">x=</div>
			<div class="_c6 fl" id="c6_1"><?php echo $current_coord[0];?></div>
			<div class="_d3f2 fl" id="d3f3">y=</div>
			<div class="_c6 fl" id="c6_2"><?php echo $current_coord[1];?></div>
		</div>
	<div class="f2 m bo lp3 tp1">
			<div class= "_d1f2" id="d1f22">PROJEKT:</div>
			<div class="_c2" id="c3"><?php echo $current_project;?></div>
		</div>
	<div class="f2 xs bo lp3 tp2">
			<div class="_d2f2 fl" id="d2f2">Zeichner:</div>
			<div class="_c4 fl" id="c4"><?php echo $current_creator;?></div>
		</div>
	<div class="f3 st bo lp4 tp1">
			<div class="_d1f3" id="d1f31">AUFSCHLUSS:</div>
			<div class="_c3" id="c3_1"><?php echo $current_blog;?></div>
		</div>
	<div class="f3 s bo lp4 tp3">
			<div class="_d1f3" id="d1f32">MSTAB:</div>
			<div class="_c3" id="c3_2"><?php echo $current_mstab;?></div>
		</div>
	<div class="f3 xs bo lp4 tp2">
			<div class="_d2f3 fl" id="d2f3">GZ.:</div>
			<div class="_c5 fl" id="c5"><?php echo $current_gzl;?></div>
		</div>
	<div class="f1 xs bo lp1 tp4">
			<div class="_d4f1 fl" id="d4f1">GOK:</div>
			<div class="_c7 fl" id="c7"><?php echo $current_gok;?></div>
			<div class="_d4f2 fl" id="d4f2">m. .A.</div>
		</div>
	<div class="f2 xs bo lp2 tp4">
			<div class="_d5f1 fl" id="d5f1">Aufnahmedatum:</div>
			<div class="_c8 fl" id="c8"><?php echo $current_create_date;?></div>
		</div>
	<div class="f4 xs bo lp3 tp4">
		<div class="_d6f1 fl" id="d6f1">Projektleiter:</div>
			<div class="_c9 fl" id="c9"><?php echo $current_creator;?></div>
		</div>
	
	<div class="gg g1 bo lp1 tp5 of">
		<div class="_drot1" id="drot1">Tiefe ab GOK</div>
	</div>
	
	<div class="gg g1 bo lp5 tp5">
		<div class="_drot1" id="drot2">Wasser- beobachtung</div>
	</div>
	
	<div class="gg g2 bo lp6 tp5">
		<div class="_d8f1" id="d8f1">Gesteinsarten</div>
	</div>
	
	<div class="gg g3 bo lp7 tp5">
		<div class="_d7f1" id="d7f1"><?php print_r($lith_layer);?><!--Benennung und Beschreibung der Gesteinsarten und des Gef ges (Symbol und/oder Langtext)--></div>
	</div>
	
	<div class="gg g4 bo lp8 tp5 mal">
		<div class="_drot1" id="drot3">GOK m. .A.</div>
	</div>

</div></div>

The text was updated successfully, but these errors were encountered:

HackbrettXXX · 2021-05-06T08:38:56Z

This looks related to #2924 and #2925. What happens if you use html2canvas to render the HTML into a canvas? Is it correctly aligned then?

gonztest · 2021-05-06T09:32:41Z

no, i get this:

using html2canvcas, my code:

	html2canvas(document.getElementById("log_container")).then(function(canvas){
		document.body.appendChild(canvas);
		var imgData = canvas.toDataURL("image/png");
		var doc = new jsPDF('p', 'pt','a4',true,true);
	doc.addImage(imgData,"PNG",0,0);
	doc.save("x.pdf");
	});

also, i have no idea where this margin comes from. my html has no margin or padding

HackbrettXXX · 2021-05-07T09:12:49Z

Mmh then this looks like issues both in html2canvas as well as in jsPDF, since there is still a margin in your second example but it's smaller than in the first example. You should probably create an issue on html2canvas side, too.

tschtt · 2021-06-02T15:50:07Z

I was struggling with the same error. I thing it's a problem with the unit scaling or something like that.

This is the code i used:

import JsPDF from 'jspdf'

const doc = new JsPDF({
  unit: 'px', 
  hotfixes: ["px_scaling"]
})

const element = document.getElementById('YourElement')

doc.html(element, {
  x: 0,
  y: 0,
  callback: doc => doc.save()
})

Hope it helps!

HackbrettXXX · 2021-09-14T15:04:31Z

You might try the new width and windowWidth options in 2.4.0

gaetandezeiraud · 2021-11-04T09:08:03Z

Maybe related, not sure. But I have a mysterious right border. No problem on the HTML. The gray background color is normally 100% width.

var doc = new jsPDF({
        unit: 'px',
        hotfixes: ['px_scaling']
});

EDIT: Working if I set

        width: 794,
        windowWidth: 794,

For example. But don't know what value I need to use.

gonztest changed the title ~~jspdf doesnt display html element width and background correctly~~ jspdf doesnt display html element width correctly May 5, 2021

HackbrettXXX added Bug help wanted labels May 7, 2021

KurtGokhan mentioned this issue Jul 8, 2021

Fix scaling issues in html module #3203

Merged

HackbrettXXX closed this as completed Nov 5, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jspdf doesnt display html element width correctly #3154

jspdf doesnt display html element width correctly #3154

gonztest commented May 5, 2021 •

edited

Loading

HackbrettXXX commented May 6, 2021

gonztest commented May 6, 2021 •

edited

Loading

HackbrettXXX commented May 7, 2021

tschtt commented Jun 2, 2021

HackbrettXXX commented Sep 14, 2021

gaetandezeiraud commented Nov 4, 2021 •

edited

Loading

jspdf doesnt display html element width correctly #3154

jspdf doesnt display html element width correctly #3154

Comments

gonztest commented May 5, 2021 • edited Loading

HackbrettXXX commented May 6, 2021

gonztest commented May 6, 2021 • edited Loading

HackbrettXXX commented May 7, 2021

tschtt commented Jun 2, 2021

HackbrettXXX commented Sep 14, 2021

gaetandezeiraud commented Nov 4, 2021 • edited Loading

gonztest commented May 5, 2021 •

edited

Loading

gonztest commented May 6, 2021 •

edited

Loading

gaetandezeiraud commented Nov 4, 2021 •

edited

Loading