I am working on codeigniter. I want to add save to pdf functionality to one of the div. I am using html2canvas to print it. My problem is I want to add a logo & some other information at the header of the pdf, which is not visible on the webpage. I dont know how to do this. Below is my code.
<script type='text/javascript' src="<?php echo site_url('assets/js/html2canvas.js'); ?>"></script>
<script type='text/javascript' src="<?php echo site_url('assets/js/jspdf.debug.js'); ?>"></script>
<script type='text/javascript'>//<![CDATA[
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#content')[0], function () {
pdf.save('test.pdf');
});
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 30,
bottom: 30,
left: 30,
width: '100%'
//color: '#000'
};
pdf.addHTML()(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('test.pdf');
}, margins);
}
</script>
<div id="content">
Save this to PDF
</div>
Pls help.
Before calling to addHTML, you can add images or text to your jsPDF object:
var pdf = new jsPDF('p','pt','a4');
var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAXwBfAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyIoLTkwKCo2KyIjMkQyNjs9QEBAJjBGS0U+Sjk/QD3/2wBDAQsLCw8NDx0QEB09KSMpPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT3/wgARCAAaABQDAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAABQYAAwQB/8QAGAEBAQEBAQAAAAAAAAAAAAAAAwEAAgT/2gAMAwEAAhADEAAAAXKbOK1c92KOHzuQcxaHNjdidpy5yl//xAAfEAACAQMFAQAAAAAAAAAAAAABAgADEhMEEBEhIjH/2gAIAQEAAQUC+QuVq6duEqnoephWKDia/FLjLjt//8QAHREAAgIBBQAAAAAAAAAAAAAAAAIBEQMSEyAiMf/aAAgBAwEBPwEhIZLj2DOttcCkNp7G8xZfH//EAB4RAAIDAAEFAAAAAAAAAAAAAAABAgMREiAhIjFR/9oACAECAQE/AR2ONmS9MolkcZZ8aHDl4b2FTEaEun//xAAhEAABAwMEAwAAAAAAAAAAAAABAAIRAxAxEjJBQiFhYv/aAAgBAQAGPwJQ7acIg8FQWFzfS0B0t+shcpkNqHx1KqahU29rZKybf//EAB0QAQADAQACAwAAAAAAAAAAAAEAESExQVFhgZH/2gAIAQEAAT8hUFrUE1U6+ZZvXITcrvpNdp4xEO+l1b7Gv7BQdYMALdXDkpwD7ipT+kOT/9oADAMBAAIAAwAAABBnmCSOz//EABsRAQACAwEBAAAAAAAAAAAAAAEAESExYSBx/9oACAEDAQE/EAXUQdz5KIsIMuNjTLWFPNMVwaOQoRsVXn//xAAcEQEAAgIDAQAAAAAAAAAAAAABABEhMSBhcVH/2gAIAQIBAT8QUMsIdQ9/JZNpSUTIImK3bZ5AbtfZa3cpbvj/AP/EABwQAQACAwEBAQAAAAAAAAAAAAEAESExQXFRwf/aAAgBAQABPxCsIatahd4Y+dDAb93fjD4HtO4qLlXU0ej2pdETsO11xEdV8cP2hExkSA2d3NHkA0Q0CIxSEyKmjyf/2Q==';
pdf.addImage(imgData, 'JPEG', 20, 20, 20, 26);
pdf.text(50, 40, "Header");
pdf.addHTML(document.body,40,100,function() {
pdf.save('web.pdf');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<body>
<p id="to-pdf">HTML content...</p>
</body>
Images must be encoded with base64. You can use this tool for that: http://dataurl.net/#dataurlmaker
Related
I'm trying to export the table to PDF file but if there are Hebrew characters it wont display them correctry.
I've tried to add mata tag of UTF-8 in the HEAD section and also with php header of 'Content-Type: text/html; charset=utf-8'
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#customers')[0];
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 10,
width: 300
};
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Test.pdf');
}, margins);
}
You are exporting HTML of a specific element to a PDF file, this HTML is not containing any header information, so you should add this information before you export it to pdf. Here you can see an example how to add the utf-8 information.
pdf.fromHTML(
'<html><head><meta charset="utf-8" /><body>' + source + '</body></html',
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
}
...
);
I think you can use dir="rtl" for more info please go through this below link
https://developers.itextpdf.com/ja/node/2079
Ok, I have scoured the internet for a solution to this but I can't find anything. I am trying to find a way to save the contents of an iframe as a PDF. I am always running into an issue where the PDF is just blank. It seems that jsPDF is the only way. I'm kind of wondering if the reason this isn't working is because of the fromHTML() function. I'm not sure. If any of you have figured out a solution I would be very appreciative!!
Here is some sample code you can try in an HTML file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#frame')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Test.pdf');
}, margins);
}
</script>
<button onclick="javascript:demoFromHTML();">PDF</button>
<iframe id="frame" src='https://wikipedia.org/wiki/Main_Page' style="width: 75%;height: 75%;"></iframe>
Go through this article : Convert HTML/CSS Content to a Sleek Multiple Page PDF File Using jsPDF JavaScript library. The provided script allows you to convert any HTML element to PDF. I modified the generate() function slightly so that it takes any HTML element id name and export it as PDF file:
generate = function(doc)
{
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setFontSize(18);
pdf.fromHTML(document.getElementById(doc),
margins.left, // x coord
margins.top,
{
// y coord
width: margins.width// max width of content on PDF
},function(dispose) {
headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
},
margins);
var iframe = document.createElement('iframe');
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:650px; padding:20px;');
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring');
};
It works 100% on Chrome but Im not sure about other browsers.
Try this solution.
<button id="generatePDF">Generate PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( '#generatePDF' ).click( function()
{
var pdf = new jsPDF('a4');
pdf.text("Some text inside PDF", 10, 10);
$( '#docpdf' ).attr('src', pdf.output('datauristring'));
});
</script>
<iframe id="docpdf" style="background-color:#EEE; height:400px;">
PDF goes here
</iframe>
A wild guess here but I think this has to do with the fact that Iframes from other domains are protected.
Read into 'cross-domain policy', if it's the cause I'm quite sure you can't work around it very easy.
try
var source = window.document.getElementsByTagName(tagName)[0];
instead of
source = $('#frame')[0];
Here is the code to generate PDF from HTML using jQuery and jspdf.There are no events occurs when the "download pdf" button clicks.
jquery:
$(document).ready(function() {
$('#download_pdf').click(function(e) {
e.preventDefault();
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#table_stock')[0],
specialElementHandlers = {
'#table_stock': function(element, renderer) {
return true
}
}
margins = {
top: 60,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source, margins.left, margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function(dispose) {
pdf.save('Stockreport.pdf');
},
margins
)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stock_report" id="table_stock"></div>
<button id="download_pdf" class="btndownloadt_stock_report btn btn-primary">Download PDF</button>
You have not included the lib include the lib as following because after adding this lib there is no error.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js'></script>
Another thing just use $('#table_stock') there is no requirment of [0], if you are using class selector then $('.stock_report')[0].
update with my error
$(function() {
var specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
$('#cmd').click(function() {
var doc = new jsPDF();
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>
<script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script type="text/javascript" src="library/BlobBuilder.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<div id="target">
<div id="content">
<h3>Hello, this is mathit app</h3>
<a class="upload">Upload to Formulas</a>
<h2>
This is <b>10th Std Notes</b> <span style="color: red"></span>
</h2>
<p>Study about The polynomial of degree two is called quadratic polynomial and equation corresponding to a quadratic polynomial P(x) is called a quadratic equation in variable x. Thus, P(x) = ax2 + bx + c =0, R is known as the standard form of quadratic
equation. There are two types of quadratic equation. (i) Complete quadratic equation : The equation ax2 + bx + c =0 where a,b,c is not equal to 0. (ii) Pure quadratic equation : An equation in the form of ax2 = 0, a is not equal to 0, b,c is equal
to 0.
</p>
</div>
</div>
<button id="cmd">generate PDF</button>
How to download the div tag details and save have png image. I have some code in download the double time download in pdf i want to download the one in pdf and another one in png image how to change the code please help me for example user click the button to down load the pdf and png image.
You can actually do this with the help of HTML2Canvas jquery file and HTML5 download attribute.
$(document).ready(function() {
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function(canvas) {
getCanvas = canvas;
}
});
var specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
$("#cmd").on('click', function() {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#cmd").attr("download", "Sample_Pic.png").attr("href", newData);
var doc = new jsPDF();
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
jsfiddle
I'm developing a page and I need to export my page to PDF. Here 's an overview of my page
http://i.imgur.com/4QmY3fp.jpg
Library jsPdf:
<script type="text/javascript" src="scripts/jspdf/jspdf.js"></script>
<script type="text/javascript" src="scripts/jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="scripts/jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="scripts/jspdf/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="scripts/jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="scripts/jspdf/jspdf.plugin.cell.js"></script>
<script type="text/javascript" src="scripts/jspdf/libs/Deflate/deflate.js"></script>
<script type="text/javascript" src="scripts/jspdf/libs/Blob.js/Blob.js"></script>
<script type="text/javascript" src="scripts/jspdf/libs/FileSaver.js/FileSaver.js"></script>
Here 's the js code for jspdf:
function demoFromHTML() {
var doc = new jsPDF('p', 'in', 'letter');
var source = window.document.getElementsByTagName("body")[0];
var specialElementHandlers = {
'#bypassme': function(element, renderer) {
return true;
}
};
doc.fromHTML(
source, // HTML string or DOM elem ref.
0.5, // x coord
0.5, // y coord
{
'width': 100, // max width of content on PDF
'elementHandlers': specialElementHandlers
});
doc.output('dataurl');
}
When I click the button, it returns a pdf like this and I'm a total newbie in this jsPDF so I don't know what I did wrong
http://i.imgur.com/5cMgNR6.jpg