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

List elements don't get converted correctly from using html function #2922

Closed
noobling opened this issue Sep 22, 2020 · 11 comments
Closed

List elements don't get converted correctly from using html function #2922

noobling opened this issue Sep 22, 2020 · 11 comments
Labels
no-issue-activity

Comments

@noobling
Copy link

When using ul element and calling .html() function to convert that into a pdf it fails refer to the screenshot.

image

Browser: Chrome Version 85.0.4183.121 (Official Build) (64-bit)

Here is example code to repro:

<html>

<head>
    <title>display/box/float/clear test</title>
</head>

<body>
    <div id="html">
		<h1>Ordered And Unordered Lists</h1>
		<h2>Implemented</h2>
		<ol>
			<li>OL Item (default)</li>
			<li style='list-style-type: decimal'>OL Item (decimal)</li>
			<li style='list-style-type: upper-alpha'>OL Item (upper-alpha)</li>
			<li style='list-style-type: lower-alpha'>OL Item (lower-alpha)</li>
			<li style='list-style-type: upper-roman'>OL Item (upper-roman)</li>
			<li style='list-style-type: lower-roman'>OL Item (lower-roman)</li>
			<li style='list-style-type: none'>OL Item (none)</li>
		</ol>
		<ul>
			<li>UL Item (default)</li>
			<li style='list-style-type: circle'>UL Item (circle)</li>
			<li style='list-style-type: square'>UL Item (square)</li>
			<li style='list-style-type: disc'>UL Item (disc)</li>
			<li style='list-style-type: none'>OL Item (none)</li>
		</ul>

		<h2>Not Implemented</h2>
		<pre>
    upper-latin
    lower-latin
    armenian
    cjk-ideographic
    decimal-leading-zero
    georgian
    hebrew
    hiragana
    hiragana-iroha
    katakana
    katakana-iroha
        </pre>
	</div>

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js"></script>
	<script>
		var pdf = new jspdf.jsPDF('p', 'pt', 'letter');
		pdf.html(document.getElementById('html'), {
			callback: function (pdf) {
				var iframe = document.createElement('iframe');
				iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
				document.body.appendChild(iframe);
				iframe.src = pdf.output('datauristring');
			}
		});
    </script>
</body>

</html>
@HackbrettXXX
Copy link
Collaborator

Seems like html2canvas uses Unicode symbols for the bullets that are not in the ASCII range. You need to add a custom font for this.

@noobling
Copy link
Author

So if I understand correctly we need custom fonts to use html(). I assume it was working at some point maybe we can choose a specific version of html2canvas?

@HackbrettXXX
Copy link
Collaborator

I haven't looked into details, but judging from the image, it's true that you need a custom font for the bullets. You can try using a different version of html2canvas. Could you maybe search through the sources of html2canvas and verify my theory?

@Cthulhu-28
Copy link

@noobling Were you able to solve this issue with a custom font? I have the same issue.

@noobling
Copy link
Author

Partly if you rollback html2canvas to a specific version. Idk the version and I've left that company now so...

@HackbrettXXX HackbrettXXX mentioned this issue Jan 11, 2021
Closed
@github-actions
Copy link

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

@HackbrettXXX
Copy link
Collaborator

This was probably fixed in 2.3.0: #3062. Can someone confirm please?

@github-actions github-actions bot closed this as completed Feb 5, 2021
@mahamedh
Copy link

mahamedh commented May 22, 2022 •
edited

`const data =
'

MCQ 
Bold
italic
underline
ordered list
  1. a
  2. b
  3. c
    unordered list
    • a
    • b
    • c
 
';
const Prints = () => (

  1. Choose which type of game you want to play
  2. Press the spacebar to start the game
    • Controls for single player mode:
      • W and S
      • ↑ and ↓
      • A and Z
      • ' (apostrophe) and / (forward slash)
    • Controls for double player mode:
      • The right player uses A and Z
      • The left player uses ' and /
);

const print = () => {
const string = renderToString();
const pdf = new jsPDF("p", "mm", "a4");
pdf.html(string, {
margin: [35,0,20,0],
html2canvas: { scale: 0.5 },
autoPaging:'text',
callback: function (doc) {
doc.save('ExpertDecks.pdf');
},
});
}`

not converting correctly in latest version any one please @HackbrettXXX

@mahamedh
Copy link

This was probably fixed in 2.3.0: #3062. Can someone confirm please?
not resolved i am facing a issue

@ShettyK-dee
Copy link

@mahamedh not fixed

@kajana-supriya
Copy link

the issue still exists

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

No branches or pull requests
6 participants
@HackbrettXXX @noobling @Cthulhu-28 @mahamedh @kajana-supriya @ShettyK-dee