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
Related
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...{});
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>
I am trying convert the html div element to pdf file using jspdf. i have included all js script including form_html.js. still i am getting "TypeError: doc.fromHTML is not a function".
<script type="text/javascript" src="jsPDF-master/jspdf.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.cell.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.ie_below_9_shim.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.javascript.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="jsPDF-master/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.sillysvgrenderer.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.PLUGINTEMPLATE.js"></script>
<script src="jspdf.debug.js"></script>
<script src="jspdf.plugin.from_html.js"></script>
and javascript is
jQuery(function($) {
$("#button1").click(function(){
var doc = new jsPDF();
var specialElementHandlers = {
'#simple': function (element, renderer) {
return true;
}
};
var source = $('#simple').html();
doc.fromHTML(source, 0.5, 0.5, {
'width': 75,'elementHandlers': specialElementHandlers
});
doc.output("dataurlnewwindow");
});
});
Pls help me in fixing this
i might be wrong because i have not run your code but i notice is you have not included a jquery library into the script tag and you are using a jquery function. Try including Jquery and retry hope that solves your problem..
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.
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>