Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
issue with displaying HTML element with .html() method : jsPDF 2.1.1
See original GitHub issueHello , I am faced issue when i try to use .html() method, i got a word by line in PDF file . is it bug or i missed some parameters ? thank to find below the code
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="../dist/jspdf.umd.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<script type="text/javascript" src="../../DOMPurify-main/dist/purify.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
</header>
<script>
var varHeight = 130; // Starting point from the top
//create new Document
var doc = new jspdf.jsPDF({unit: "px"});
var source = "<p>Hello world!jkkkkkkkk kkkkkk kkkkkkk kkkkkkkk hhhhhhhhhhh kkkkkkk kkkkkk kkkkkkkkk hiuhih </p>" ;
// handle content from HTML
var specialElementHandlers = {
'#ignorePDF' : function(element, renderer){ // we should specifie the div will be treated , by ID or class name
return true;
}
};
doc.setFont("times","normal");
doc.html(source, {
html2canvas: {
// insert html2canvas options here, e.g.
scale: 0.6,
width: 360,
},
callback: function (doc) {
//doc.save();
addApprovers(doc);
},
x: 40,
y: varHeight + 85,
});
// manage approvers part
function addApprovers(doc){
doc.text(20, varHeight + 200, 'second text');
doc.save();
}
</script>
</body>
</html>
Issue Analytics
- State:
- Created 3 years ago
- Comments:6
Top Results From Across the Web
Only Displaying One Page | Blank Pages | .html() method #2973
Hi. I am trying to create a new pdf via HTML element parsed from a string in a file, this file has only...
Read more >jspdf is not able to capture the div content properly for ...
There is an in built function html2canvas which takes element id as an argument and return the canvas. Returned canvas can be added...
Read more >jsPDF Tutorial to Export HTML Table to PDF ... - YouTube
#javascript # jspdf #htmltopdf. jsPDF Tutorial to Export HTML Table to PDF Document Without jspdf -autotable Library Using fromHTML.
Read more >Generating PDFs from Web Pages on the Fly with jsPDF
Massimo Cassandro demonstrates how to make use of jsPDF, a JavaScript library for generating PDF documents from web pages.
Read more >HTML Standard
These are guaranteed to never be touched by browsers, and allow scripts to include data on HTML elements that scripts can then look...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hello @chucknelson, yes you are right css was the problem. now it works perfectly Thanks for your support. For other people facing the same problem, they can just arround your HTML contentwith a DIV element like below.
Solved.