I'm able to download a PDF using jsPDF but the downloaded PDF is plain text excluding the styles applied in the website.
I am unable to get the styles or formatting in the website to the downloadable PDF.
Here's the jsPDF code I use:
<button type="button" onclick="convert()" class="pda-button"><i class="save-icon sprite"></i> Save</button>
<div id="content">
//content goes
</div>
<div id="elementH"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://demos.codexworld.com/includes/js/bootstrap.js"></script>
<script src="http://demos.codexworld.com/3rd-party/jsPDF/dist/jspdf.min.js"></script>
<script>
function convert() {
var doc = new jsPDF();
var elementHTML = $('#content').html();
var specialElementHandlers = {
'#elementH': function (element, renderer) {
return true;
}
};
doc.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
// Save the PDF
doc.save('sample-document.pdf');
}
</script>
Here's the link to website I integrated the above code and want to convert to PDF:
Website's link
As I click on save button on the top left of the site to download PDF, the PDF is generated and downloaded but as an plain text PDF with no styles.
And Please do not Down-Vote the post without explaining the reason for doing so..
You need to give a callback function to the method doc.fromHTML
doc.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
}, function cb() {} );
cb() will tell you that the pdf is ready.
Related
I've tried to convert dynamic webpage to PDF by using jsPDF it worked for me and now I wants to change the font family of PDF by using jsPDF. Is there any option. Please let me know. Thanks!
Below my code
<div id="#preview-details">dynamic data goes here..</div>
<button id="downloadPDF">Print</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#downloadPDF').click(function () {
doc.fromHTML($('#preview-details').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('pdfdoc.pdf');
});
</script>
As I know you have to download the font as a ttf format, then you need to add it into your code like the following code:
// add custom font to file
doc.addFont("ConsolasHex.ttf", "ConsolasHex", "Bold");
doc.setFont("ConsolasHex","Bold");
doc.setFontSize(12);
The page in this URL has explain it enter link description here
I'm creating a Razor Pages Web App and I'm trying to have a button that when clicked, generates a pdf. To do this, I'm using jsPDF to convert html to pdf. I was able to get it to create and open a pdf, but when I try to add an image, I run into the problem that clicking the button doesn't any pdf. I was able to create the image-less pdf with the following code:
Code for button:
<button class="btn btn-sm btn-secondary order-button" id="testImage" onclick="this.form.submit(#Model.Project.ID)">Create Image</button>
Code in Scripts:
<script type="text/javascript">
$(function () {
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#testImage').click(function () {
var doc = new jsPDF();
doc.fromHTML($('#testImagePDF').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
//THIS IS WHERE I WAS PUTTING THE IMAGE
doc.output("dataurlnewwindow");
doc.save('TestImage_' + document.getElementById('testNum').value + '.pdf');
});
});
</script>
Html for testImage:
<form method="post" hidden>
<div id="testImagePDF">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
<header style="border-bottom: 1px solid #000">
<h2 style="margin:0; padding:0">Test Image</h2>
</header>
</div>
</form>
When I add the following code to the spot commented in the scripts code, the pdf no longer opens after clicking the button:
//Code to insert the image
var line = new Image();
line.src = 'BlackRectangle.jpg';
doc.addImage(line, 'jpg', 10, 10, 80, 40);
The image 'BlackRectangle.jpg' is located in my wwwroot folder in my project. Does anyone know why after adding the image my pdf will not open and/or how to fix it so it opens and displays the image?
Notes: -This is in a Razor page's 'Details' page (created with CRUD)
If you press f12 in the browser, you will find the error. The image path is not correct.
Add a "/" before the image.
line.src = '/BlackRectangle.jpg';
When I'm converting my html div to pdf using Jspdf library the generated pdf
is not showing the whole content of mydiv.It only shows little html but not complete div. What I am missing in this ?
<button id="b2">Export to pdf</button>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#b2').click(function () {
doc.fromHTML($('#mydiv').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
Things you can do:
Check if your IDs are correct: #editor for the specialElementHandlers and #mydiv in the click function?
Check the Javascript console for errors
Check examples like this or questions like this to find any errors
Hello Im trying to save my html page to PDF and I have this code:
<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>
<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');
});
// This code is collected but useful, click below to jsfiddle link.
</script>
I uploaded to jsFiddle and works... but when I try it in my browser doesnt works and I get the error doc.fromHTML is not a function. I have the jQuery and jsPDF references exactly like jsFiddle.
Example Code
The fromHTML function was replaced by html in 2.0.0. Unfortunately, the typings currently still contain the fromHTML method but a fix is under way.
Add External libraries - Jquery and Jspdf js files with script tags
<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>
Codepen - http://codepen.io/nagasai/pen/JKKNMK
I came across jsNode library here Generate pdf from HTML in div using Javascript
So I've installed. I'm tryna use it to print a leaflet map. It seems I was not able to set it propely. It create the PDF but nothing shows on the map. Could you help me with that ?
Javascript
function genPDF() {
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function(element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("div")[0];
doc.fromHTML(
source,
15,
15, {
'width': 180,
'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
}
HTML
<html>
<body onload="Create_MAP();">
<div id="map">
</div>
<input type="button" class="bt" value="PRINT PDF" onclick="genPDF();">
</body>
</html>
You need to turn your leaflet map into an image first.
You can use https://github.com/mapbox/leaflet-image
Then add that image to jsPDF for export.