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';
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 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.
I am trying to create an PDF file from a PHP page with jsPDF but it is not working and I dont know whats wrong.
Can someone help me?
First I have a Iframe. The page I want to convert is displayed in the Iframe:
Iframe:
<?php
<iframe id="frame" name="frame" width="100%" height="1160px" frameborder="0" src="./page.php?id=' . $_GET['id'] . '"></iframe>
<button id="cmd">Button</button>
?>
When I hit Button the following script should convert the page to PDF
Script
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/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($('frame').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
But when I hit Button. Nothing is happening. Does someone know whats wrong?
You must be get html of iframe, so use contents() function and then get documentElement of iframe:
<iframe id="frame" name="frame" width="100%" height="1160px" frameborder="0" src="http://localhost/"></iframe>
<button id="cmd">Button</button>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/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($('#frame').contents().find('html').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
Note: If your iframe source page or part of it protected with x-frame-options header, you cannot access to html of it.
<button onclick="cmd()">Button</button>
Change this to
<button id="cmd">Button</button>
You are calling the click event in JS on the id. Or change the onclick event to a function with the name cmd.
Apparently, jsPDF has limitations and/or bugs. It has problems with complex tables (especially with colspans). It throws javascript errors which stops the renderer which is why you're getting blank pdfs.
https://github.com/MrRio/jsPDF/issues/516
https://github.com/MrRio/jsPDF/issues/595
A fork has been posted here: https://github.com/jutunen/jsPDF-table_2 but I'm not sure if it addresses other limitations of jsPDF.
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.