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...{});
Related
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>
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>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script type="text/javascript">
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>
<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>
my code is working fine in jsfiddle but not working in localhost i have mentioned all my code so it will be easy to understand that what i am doing
The problem is the order of your html, change your markup to :
<div id="editor"></div>
<button id="cmd">generate PDF</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
console.log("Hola");
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
</div>
The click event is not being triggered because you're adding a listener to something that doesn't exist. The code works, even in file:// protocol. With jsFiddle works because the markup is rendered automatically by the app.
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
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.