jsPDF
Generate PDF files in JavaScript. HTML5 FTW.
jsPDF - HTML5 PDF Generator | Parallax a html5 client-side solution for generating pdfs. perfect for event tickets, reports, certificates, you name it!
When I try and use the save() function for jsPDF it's throwing the following error:
ReferenceError: saveAs is not defined
I'm just trying a very simple example:
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
doc.save('test.pdf');
Anyone have any ideas what's wrong?
Source: (StackOverflow)
what I'm doing is using jsPDF to create a PDF of the graph I generated. However, I am not sure how to wrap the title (added by using the text() function). The length of the title will vary from graph to graph. Currently, my titles are running off the page. Any help would be appreciated!
This is the code i have so far:
var doc = new jsPDF();
doc.setFontSize(18);
doc.text(15, 15, reportTitle);
doc.addImage(outputURL, 'JPEG', 15, 40, 180, 100);
doc.save(reportTitle);
Nothing to keep the reportTitle from running off the page
Source: (StackOverflow)
I am looking for a solution to generate pdf from (html + css + javascript) using AngularJs.
I tested two solutions: jsPDF (it does not take the css) and Shrimp which is based on Ruby.
Is anyone among you already was in the same situation as me? Do you have any solutions?
Thank you for help
Source: (StackOverflow)
Is it possible to include custom fonts in jsPDF ?
With the basic library, if I console log 'doc.getFontList()' I get:
Courier, Helvetica, Times, courier, helvetica, times
But, say I want to use 'Comic Sans' ( not that I would ;o) ) can it be done ?
Even better, could I use a font is locally stored and has been declared in the site with @font-face ?
Source: (StackOverflow)
I'm new to using jsPDF but and for the life of me I can't get any css to apply to this thing! I've tried inline, internal, and external all to no avail! I read in another SO post that since it's technically printing stuff to a file I need a print style sheet, and that didn't work either.
I have a very basic page that I'm just trying to get any CSS to work with:
JS:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jspdf.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.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>
$(document).ready(function(){
$('#dl').click(function(){
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
var doc = new jsPDF('landscape');
doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers});
doc.output('save');
});
});
</script>
HTML:
<body>
<div id="dl">Download Maybe?</div>
<div id="testcase">
<h1>
We support special element handlers. Register them with jQuery-style
</h1>
</div>
</body>
And finally the stylesheet that is external:
h1{
color: red;
}
div{
color: red;
}
I'm sure all is getting included correctly, and that there are no errors, already checked all of that. Is there like some extra function I need to call to get the css to work as well? Let me know please! Thanks alot! Any other tips you may have are also appreciated!
EDIT:
This is the exact webpage:
<html>
<head>
<link rel="stylesheet" rel='nofollow' href="print.css" type="text/css" media="print"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jspdf.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.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>
$(document).ready(function(){
$('#dl').click(function(){
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
var doc = new jsPDF('landscape');
doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers});
doc.output('save');
});
});
</script>
</head>
<body>
<div id="dl">Download Maybe?</div>
<div id="testcase">
<h1>
We support special element handlers. Register them with jQuery-style
</h1>
</div>
</body>
</html>
Source: (StackOverflow)
I'm trying to create a simple pdf doc using javascript. I found jsPDF but I don't figure out how to center text. Is it possible?
Source: (StackOverflow)
I am using jspdf to generate a pdf file. Every thing is working fine. But how to open generated
pdf in new tab or new window.
I am using
doc.output('datauri');
Which is opening the pdf in same tab.
Source: (StackOverflow)
I need to export the HTML table to pdf file using jspdf. I tried the below code but it displays the blank/empty output in pdf file. Any suggestions or sample code for this would be helpful.
`
<script type="text/javascript">
function demo1() {
$(function () {
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#cmd').click(function () {
var doc = new jsPDF();
doc.fromHTML($('#htmlTableId').html(), 15, 15, {
'width': 170,'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
}
</script>
`
Source: (StackOverflow)
I am using jsPDF in my site to generate PDFs. But now I have multiple DIVs to print in a single PDF. which may take 2 to 3 pages.
For example:
<div id="part1">
content
</div>
<div id="part2">
content
</div>
<div id="part2">
content
</div>
my JS code
- This works but not as I expected, It add a part of the content(which cannot be included in more than one page).
- It removes html tags like br, h1 etc.
function formtoPDF() {
jsPDF.API.mymethod = function() {
// 'this' will be ref to internal API object. see jsPDF source
// , so you can refer to built-in methods like so:
// this.line(....)
// this.text(....)
};
var doc = new jsPDF();
doc.mymethod();
var pdfPart1 = jQuery('#genPDFpart1');
var pdfPart2 = jQuery(".ltinerary");
var pdfPart3 = jQuery("#domElementHTML");
var specialElementHandlers = {
'#loadVar': function(element, renderer) {
return true;
}
};
doc.fromHTML(pdfPart1.html() + pdfPart3.html() + pdfPart3.html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.output('save', 'Download.pdf');
}
Can I have a solution for this. Thanks in advance pals .
Source: (StackOverflow)
I am having trouble in rendering svg element to pdf using jspdf . Iam using plugin https://github.com/CBiX/svgToPdf.js/ to do this.
Below is my code
// I recommend to keep the svg visible as a preview
var tmp = document.getElementById("chartContainer");
var svgDoc = tmp.getElementsByTagName("svg")[0];
var pdf = new jsPDF('p', 'pt', 'a4');
svgElementToPdf(svgDoc, pdf, {
scale: 72 / 96, // this is the ratio of px to pt units
removeInvalid: false // this removes elements that could not be translated to pdf from the source svg
});
pdf.output('datauri'); // use output() to get the jsPDF buffer
It is generarting blank pdf. Please help
Source: (StackOverflow)
i want to save a PDF file which contains an IFrame Content. I use the jsPDF Javascript library for.
Here is my Code as yet:
function toPDF(){
var pdf = new jsPDF('p', 'in', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#iframeid')[0]
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#emptyid': function(element, renderer){
// true = "handled elsewhere, bypass text extraction"
return true
}
}
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source // HTML string or DOM elem ref.
, 0.5 // x coord
, 0.5 // y coord
, {
'width':7.5 // max width of content on PDF
,'elementHandlers': specialElementHandlers
}
)
pdf.save('Test.pdf');
}
when i try this i become this Error in Chrome:
Uncaught TypeError: Cannot read property 'widths' of undefined
What may be the problem ?
Source: (StackOverflow)
I am using the javascript library jsPDF to generate a pdf. I need to open the generated pdf in Windows 8. using window.open does not work. I tried saving the file and opening with no success.
How can I open the pdf?
[UDPATE]
I am trying to save it using writeBufferAsync like this:
var data = pdf.output('arraybuffer');
Windows.Storage.FileIO.writeBufferAsync(file, data).done(function () {
// Let Windows know that we're finished changing the file so the other app can update the remote version of the file.
// Completing updates may require Windows to ask for user input.
Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function (updateStatus) {
if (updateStatus === Windows.Storage.Provider.FileUpdateStatus.complete) {
WinJS.log && WinJS.log("File " + file.name + " was saved.", "sample", "status");
} else {
WinJS.log && WinJS.log("File " + file.name + " couldn't be saved.", "sample", "status");
}
});
});
But I keep getting exception that I writeBufferAsync is expecting number array. Type of data is ArrayBuffer.
[Update 2]
I tried the following, bug images don's show:
var data = pdf.output();
Windows.Storage.FileIO.writeTextAsync(file, data).done(function () {
// Let Windows know that we're finished changing the file so the other app can update the remote version of the file.
// Completing updates may require Windows to ask for user input.
Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function (updateStatus) {
if (updateStatus === Windows.Storage.Provider.FileUpdateStatus.complete) {
WinJS.log && WinJS.log("File " + file.name + " was saved.", "sample", "status");
} else {
WinJS.log && WinJS.log("File " + file.name + " couldn't be saved.", "sample", "status");
}
});
});
Source: (StackOverflow)
I am working on a project, where i am using JsPDF for Pdf Export it's have following advantages.
- All type of Chart Export supported.
- Image Attached pretty Good.
But Problem is, It does not support Html Table Colspan and CSS. So how i export complete pdf with chart, image and html table with Css style sheet.
i already tried with following jsPlugins
<script type="text/javascript" src="myproject/js/highcharts/jspdf.js"></script>
<script type="text/javascript" src="myproject/js/highcharts/jspdf.debug.js"></script>
<script type="text/javascript" src="myproject/js/highcharts/jspdf.plugin.from_html.js"></script>
Html
<table id="mytable">
<tr>
<td>headding 1</td>
<td>headding 2</td>
<td>headding 3</td>
</tr>
<tr>
<td>col 1</td>
<td colspan="2" >col 2 and 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
with the JS is
var specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true;
}
};
doc.fromHTML($('#mytable').get(0), xx, yy+=60, {
'width': 540,
'elementHandlers': specialElementHandlers
});
Pdf Output is
How i add html colspan in JsPdf?
Source: (StackOverflow)
I am a newbie trying to use jsPDF. I have a simple link that will build a pdf file and save it. However I can't get it to work. When I click the link, nothing happens. It's as if I'm not referencing the scripts. Am I missing something?
Edit: I forgot to note that I am test running this using xampp.
Here's the code:
<html>
<head>
<script src='C:\Program Files (x86)\xampp\htdocs\devtest\jsPDF-master\libs\FileSaver.js' type='text/javascript'></script>
<script src='C:\Program Files (x86)\xampp\htdocs\devtest\jsPDF-master\jspdf.js' type='text/javascript'></script>
</head>
<body>
<script>
function ci(){
var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'My First PDF');
doc.addPage();
doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');
doc.save('Test.pdf'); }
</script>
<a rel='nofollow' href="javascript:ci()">Click me </a>
</body>
</html>
Source: (StackOverflow)
Simple question searching from last 2 days but didnt find solution
i am converting html to pdf using this addHTML api of jsPDF
$('#loadPdf').on('click', function() {
var pdf = new jsPDF('p', 'in', 'a4');
pdf.addHTML($('#complete')[0], function() {
pdf.save('new.pdf');
pdf.output('datauri');
});
});
this is producing blur image pdf the text is showing blurry. I searched a lot find some links (share below) but didn't get answer.
html2canvas-generates-blurry-images
addHTML image quality
jspdf and addHTML / blurry font
is there any way available to get high quality image pdf. If i don't use addHTML api and use any other then image is not displaying in pdf. help please
Source: (StackOverflow)