Example for html to pdf converter getting unexpected error - javascript

This example is running replica of the attached fiddle (where example is running properly). I am amazed replicating the same is throwing error. Why?
HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'body': function (element, renderer) {
return true;
}
};
$('button').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
</head>
<body>
<button>Click</button>
<div class="container">
Hello!
</div>
</body>
</html>
jSFiddle
http://jsfiddle.net/5ud8jkvf/
ERROR:
Notes:
As fiddle is running properly, this example must also run without any error.
There is no attachment of jQuery file in fiddle, so I dont think jQuery is required or missing in this example.
Even on adding jQuery files - Error is gone - but pdf is not getting downloaded.


The console doesn't lies. The fiddle has dependency to jQuery.
Your markup requires jQuery. Add jQuery to your code ...
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>


The cause is that you have to add jQuery, like that:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>


Try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'body': function (element, renderer) {
return true;
}
};
$(document).ready(function(){
$('button').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
</script>
</head>
<body>
<button>Click</button>
<div class="container">
Hello!
</div>
</body>
</html>

Related

How can i save the page as pdf as soon as it has been requested?

I want to download the page as pdf as soon as it has been requested.
Here is my scripts :
<script>
pdfdoc.fromHTML($('#container').html(), 10, 10, {
'width': 110,
'elementHandlers': specialElementHandlers
});
pdfdoc.save('Invoice.pdf');
</script>
But the console is giving an error
Uncaught ReferenceError: pdfdoc is not defined
at ?id=5:435
i have already linked the script in the header
How to solve this?

You need to define a variable pdfdoc var doc = new jsPDF(); and also you need to add jspdf.min.js file.
Try this below Code:
<div id="content">
<h3>Sample h3 tag</h3>
<p>Sample pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
Can you please try below code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>
<body>
<div id="content" style="background-color: white;">
<style>
p{
font-size:27px;
}
</style>
<h3>Sample h3 tag</h3>
<p style="color:red;">Sample pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>
<script>
window.onload=function(){
$('#cmd').click(()=>{
var pdf = new jsPDF();
pdf.addHTML(document.getElementById("content"),function() {
pdf.save('web.pdf');
});
})
}
</script>
</body>
</html>

jsPDF not working on button click

Hi I was trying to import script path for jsPDF and writing function on button click ,save html page to pdf. But its not working. Below is the code-
<HTML>
<HEAD>
<script src="Scripts/jspdf.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
</script>
</HEAD>
<BODY>
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
</div>
<div id="editor"></div>
<button href="#" id="cmd">generate PDF</button>
</BODY>
</HTML>
But when I run the html and click on button, nothing happens. Please help.

You can not call an element directly in the 'fromHTML' function.
Try:
var content = $('#content').get(0).html();
doc.fromHTML(content, 15, 1...{});

jspdf didnot make a pdf of html div

I am using jsPDF to make a PDF of my div container.
that div container is the a invoice in landscape format.
When i click on save button following error is shown in alert box.
Error in function [object Object].: saveAs is not defined
javascript:
<script type="text/javascript" src="assets/jsPDF/jspdf.js"></script>
<script type="text/javascript" src="assets/jsPDF/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="assets/jsPDF/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="assets/jsPDF/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="assets/jsPDF/jspdf.plugin.from_html.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#saveinvoicepdf').click(function () {
var doc = new jsPDF();
doc.fromHTML($('#projectInvoicebox').html(), 15, 15, {
'width': 170,'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
</script>
HTML:
<a id="saveinvoicepdf" class="btn btn-two btn-lg" title="Click to print the Invoice">Save as PDF</a>
Thanks.

I had the same error and solved it by including a reference to jspdf.min.js:
src="assets/jsPDF/dist/jspdf.js"

You have to include a reference to FileSaver.min.js

Exporting the webpage into pdf file

I am trying to export the webpage(not whole page, but some part of page) into pdf file when user click the button.
But the below code is not working for me. Can any one please help me where I went wrong. I am using jsPDF to export the web page into pdf.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script>
$(function() {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
$('#cmd').click(function() {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
</script>
</head>
<body>
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
</body>
</html>

Check the fiddle here :
Fiddle
Is this code of yours from some tutorial.
$(function () {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
I tried it on Mozilla firefox and your code is working fine. On which browser you are checking cause on my side it is not working on Google chrome.

Exporting web page into PDF using jsPDf

I am trying to export the webpage into pdf file when user click the button, but the below code is not working for me . can any one please help me where I went wrong. I am using jsPDF to export the web page into pdf.
<!DOCTYPE html>
<html lang="en">
<head>
<title>html2canvas example</title>
<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="js/jspdf.js"></script>
<script type="text/javascript" src="libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<script type="text/javascript">
$(function ()
{
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
</script>
</head>
<body id="target" >
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
</body>
</html>

There is an error in the script. Please try this code
<script>
$(document).ready(function (){
$('#cmd').click(function () {
var specialElementHandlers =
function (element,renderer) {
return true;
}
var doc = new jsPDF();
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.output('datauri');
});
});
</script>

Categories