Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Special char not recognized and text illegible in a PDF generated with jspdf and html2canvas #2832

Closed
amadese opened this issue Aug 4, 2020 · 15 comments · Fixed by #3062
Closed

Special char not recognized and text illegible in a PDF generated with jspdf and html2canvas #2832

amadese opened this issue Aug 4, 2020 · 15 comments · Fixed by #3062

Comments

@amadese
Copy link

amadese commented Aug 4, 2020 •
edited

Hi,

I have a problem with the file dist/jspdf.umd.js.
Following the advice given for solving the issue #2766, I'm using the file dist/jspdf.umd.js in replacement of jspdf.js.

But I obtain problems with special characters. They are not recognized even if the meta data type is correctly defined in my page. I don't have this problem before when I used the file jspdf.js from the src folder.

For instance: in my html page "≥" for "greater than or equal to": the character should be "≥50%" and appears like that:
image

Furthermore, since I'm using the file dist/jspdf.umd.js the text is illegible: the letters overlap:
text_issue

Here my code:
`

<head> 
		<meta charset="utf-8"> 
		<title>Template 01</title>  	
		<link id="BootstrapCSS" rel="stylesheet" type="text/css" href="bootstrap.min.css">		

</head>

<body id="toPDF">

		<div id="result">
			<div id="target">
				<div class="container-fluid">			
					<p id="generateButton" style="display: none;"><button type="button" class="btn btn-primary btn-lg" onclick="download()">Generate PDF</button></p>
					<div id="content">
						<table id="table01" class="table table-bordered table_border">						
							...
						</table>
						<table id="table02" class="table table-bordered table_border">						
							...
						</table>
						
						...
					</div>
				</div>
			</div>
		</div>

</body>

<script src="jspdf.umd.js"></script>
<script src="jquery-2.1.4.min.js"></script>
<script src="html2canvas.min.js"></script>
<script>
	function download() {
		let pdf = new jspdf.jsPDF('p', 'pt', 'a4')
		let srcwidth = document.getElementById('toPDF').scrollWidth;

		pdf.html(document.getElementById('toPDF'), {
			html2canvas: {
				scale: 595.26 / srcwidth, //595.26 is the width of A4
				scrollY: 0
			},
			filename: 'jspdf',
			x: 0,
			y: 0,
			callback: function () {
				window.open(pdf.output('bloburl'));
			}
		});
	}
</script>
`

Could you please help me please to solve this issue ? I don't know if I should use another version of the jspdf version for solving this error and the error (and in the same time the error #2766).

Kind Regards,
@amadese amadese mentioned this issue Aug 5, 2020
Closed
@amadese amadese changed the title Special char not recognized in a PDF generated with jspdf and html2canvas Special char not recognized and text illegible in a PDF generated with jspdf and html2canvas Aug 10, 2020
@HackbrettXXX
Copy link
Collaborator

The overlapping issue might be related to #2294.
The font issue seems to be this: #2807.

@amadese
Copy link
Author

amadese commented Aug 11, 2020

The overlapping issue might be related to #2294.
The font issue seems to be this: #2807.

Dear @HackbrettXXX Which version of the library (which file from the "dist" folder) I have to use for solving these both issues ?

Furthermore I'm not sure that the overlappping issue is solved. I'm using the file jspdf.debug.js (present in the past in the folder dist) and the text was correctly displayed without defining a font in the function .html().

@HackbrettXXX
Copy link
Collaborator

You can use any of them, but in your case the "umd" variants are probably best.

Ok, if you tested it, then the overlapping issue is not resolved yet. I'm reopening the other issue.

@amadese
Copy link
Author

amadese commented Aug 12, 2020 •
edited

You can use any of them, but in your case the "umd" variants are probably best.

Ok, if you tested it, then the overlapping issue is not resolved yet. I'm reopening the other issue.

Thanks @HackbrettXXX ,

I have tried to implement the font with this code:


				let pdf = new jspdf.jsPDF('p', 'pt', 'a4'); // the name of the global variable has changed -> const { jsPDF } = window.jspdf
				let srcwidth = document.getElementById('content').scrollWidth;

				console.log(pdf.getFontList());
				pdf.setFont("Times");
				pdf.setFontType("bold");
				
				pdf.html(document.getElementById('content'), {
					html2canvas: {
						scale: 575.26 / srcwidth, //595.26 is the width of A4 - 10 px in less for the margins rgight and left
						scrollY: 0
					},
					filename: 'jspdf',
					x: 10,
					y: 0,
					callback: function () {
						//window.open(pdf.output('bloburl'));
						pdf.save('test');
					}
				});

But as the html is already implemented with it owner fonts, the issue of special characters is still present.
The fonts used in my html page are general ("Times New Roman",Helvetica,Arial,sans-serif.) and I would like to keep that.
Could you please help me. I don't know how to solve that with the library.

@HackbrettXXX
Copy link
Collaborator

Please share a complete test case (including the html code), otherwise I can't reproduce it.

@amadese
Copy link
Author

amadese commented Aug 12, 2020 •
edited

Please share a complete test case (including the html code), otherwise I can't reproduce it.

Dear @HackbrettXXX ,

Please find below the complete example that I use:

https://jsfiddle.net/amadese57/17npbu4y/

I'm using the version 1.5.3 of jspdf in order to avoid issues with special chars. But overlaping text issue is still present.

@amadese amadese mentioned this issue Aug 18, 2020
Closed
@amadese
Copy link
Author

amadese commented Aug 28, 2020

@HackbrettXXX Hi Did you have time to test my example about overlaping and special char issue?

Could you please help me that ?

Thanks in advance for your time

@HackbrettXXX
Copy link
Collaborator

I'm really busy again ATM. I hope I will find the time to look into this in the next weeks. Sorry about that. If this is not fast enough, you may always have a look at the sources yourself or find someone else to do it ;)

@MaximeMorin
Copy link

We got the same issue with any text with "special" characters such as "é" or even the typesetter's apostrophe. As others have pointed out, this used to work in 1.5.3.

@HackbrettXXX
Copy link
Collaborator

That's in fact really odd. @MaximeMorin could you maybe dig into that?

@MaximeMorin
Copy link

@HackbrettXXX Do you have anything in mind? We were at version 1.5.3, upgraded, issue started to happen, downgraded and it worked.

@HackbrettXXX
Copy link
Collaborator

@MaximeMorin not really. I currently don't have the time to look into this myself.

@SwissMaWi
Copy link

SwissMaWi commented Jan 12, 2021 •
edited

I have the same issue with jsPDF 2.2.0 and a number formatted to locale with thousand separator:
image
renders in PDF to
image
Can I use an older version of jsPDF to avoid the problem?

@MaximeMorin
Copy link

@SwissMaWi From my testing, 1.5.3 should work fine.

@HackbrettXXX HackbrettXXX mentioned this issue Jan 15, 2021
Merged
@HackbrettXXX
Copy link
Collaborator

I finally found out that this is indeed a regression to 1.5.3 and is due to the options.flags parameter being ignored by the text function. As a consequence, the defaults were wrong. I created a PR, which should fix the issue with the next release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix text encoding flags HackbrettXXX/jsPDF
4 participants
@MaximeMorin @amadese @HackbrettXXX @SwissMaWi