I am trying to generate a PDF in Angular2, it downloads the PDF and it downloads a blank page without any content, when I change it from addHTML to fromHTML PDF has the content when I open it in browser but when I open it using adobe it shows error 'contact the person who generated this PDF'. Can you help me with this?
generatePDF() {
let doc = new jsPDF('p', 'pt', 'a4');
let source = document.getElementById("printOffers1");
doc.addHTML(source, () => {
});
doc.save('fileName.pdf');
}
Try this code to generate PDF:
generatePDF() {
let doc = new jsPDF('p', 'pt', 'a4');
let options = {
background : "#ffff",
pagesplit: true
};
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let constant = document.getElementById("printOffers1");
doc.addHTML(constant,0,0,options,()=>{
doc.save("test.pdf");
});
}
Related
This is my first post because I am stuck and I didn't find the solution neither here or the web.
I want to convert HTML to PDF using JS. I was searching and the best option seems to be HTML2canvas and JSpdf. But the think is my HTML is storage in a variable:
var test = '<html><head><script type="text/javscript">var number = 123;</script></head><body>
<h1>"the value for number is: " + number</h1></body></html>'
My variable is much more complex and it contains CSS and styles but this is just to get the idea. Then when I try to convert this into canvas it doesn't convert.
const filename = 'ThisIsYourPDFFilename.pdf';
html2canvas(test).then(canvas => {
let pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
pdf.save(filename);
});
Does anyone know why this happens? Maybe it is a really stupid question but I don't know how to avoid the errors.
Thank you in advance.
You use string as a parameter for html2canvas, but it takes HTML element:
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
Look at their documentation
I have modified your code:
const html2canvas = require("html2canvas");
const jsPDF = require("jspdf");
html2canvas(document.getElementById("screenshot"), { scale: 1 }).then(
(canvas) => {
document.body.appendChild(canvas);
const filename = "ThisIsYourPDFFilename.pdf";
let pdf = new jsPDF("p", "mm", "a4");
pdf.addImage(canvas.toDataURL("image/png"), "PNG", 0, 0);
pdf.save(filename);
document.body.removeChild(canvas);
}
);
body should contain element with id screenshot:
<div id="screenshot">
Content
</div>
UPDATE:
According to this resource jsPDF has method fromHTML, so you might not need html2canvas
var doc = new jsPDF();
var elementHTML = $('#contnet').html();
var specialElementHandlers = {
'#elementH': function (element, renderer) {
return true;
}
};
// note here that it uses html
doc.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
// Save the PDF
doc.save('sample-document.pdf');
I'm looking to convert some simple HTML into a PDF. It seems the easiest way to do this and keep the css styling is to use the 'html2canvas' js library to convert the html to canvas first, and then create the PDF using jsPDF.
The issue I'm getting is that I have both a background image and inline image in my HTML but neither are showing in the PDF once converted. I've created a Codepen here: https://codepen.io/adamboother/pen/NWGeqom
Here's my js that does the conversion:
function convertToPdf()
{
html2canvas(document.querySelector('#certificate')).then(canvas => {
let pdf = new jsPDF('landscape', 'mm', 'a4');
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdf.internal.pageSize.width, pdf.internal.pageSize.height);
pdf.save('certificate.pdf');
});
}
Has anyone found a fix for this?
I am using useCORS: true to your code and it works, assuming your image is in the server. Besides you can follow below code:
function convertToPdf()
{
html2canvas(document.querySelector('#certificate'), {useCORS: true}).then(function(canvas) {
let img = new Image();
img.src = canvas.toDataURL('image/png');
img.onload = function () {
let pdf = new jsPDF('landscape', 'mm', 'a4');
pdf.addImage(img, 0, 0, pdf.internal.pageSize.width, pdf.internal.pageSize.height);
pdf.save('certificate.pdf');
};
});
}
I have a django app where users would print some pages which include images as a part of Data processing.
I tried jsPDF but it didn't render my images and I ended up with just text
$(document).ready(function() {
$("#pdfDownloader").click(function() {
var doc = new jsPDF('p', 'pt', 'a4', true);
doc.fromHTML($('#renderMe').get(0), 15, 15, {
'width': 500
}, function (dispose) {
doc.save('thisMotion.pdf');
});
});
})
This was my code and it didn't render the images so do I need to change anything?
is using a Django view would solve this and is there any alternatives to xhtml2pdf as with this I need to include my CSS in the HTML file ?
fromHTML is used to get text from the HTML to form a PDF. Try using html2canvas js library instead.
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
You can create a canvas image and add it to the PDF with code like this,
$(document).ready(function() {
$("#pdfDownloader").click(function() {
html2canvas($("#renderMe")).then(canvas => {
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'pt', 'a4', true); // A4 size page of PDF
var positionX = 0;
var positionY = 0;
pdf.addImage(contentDataURL, 'PNG', positionY, positionY, undefined, undefined)
pdf.save('thisMotion.pdf'); // Generated PDF
});
});
})
This will get you a PDF just like the HTML rendered on screen.
I was trying to create pdf using jspdf and which is working good except svg.All svg included in the html is not showing.
$(function(){
var pdf = new jsPDF('p', 'pt', 'a4');
$("#cmd").click(function() {
pdf.addHTML($('.chart'), function() {
pdf.save('web.pdf');
});
});
})
Is there any way to fix this issue?
I m using jsPdf plugin and did this
var data = google.visualization.arrayToDataTable(dataValues,true);
var chart = new google.visualization.CandlestickChart(document.getElementById(id));
google.visualization.events.addListener(chart, 'ready', function () {
var content = '<img src="' + chart.getImageURI() + '">';
$('#graph-images').append(content);
});
function generatePDF() {
var imageTags = $('#graph-images img');
var doc = new jsPDF();
doc.setFontSize(33);
doc.setFillColor(135, 124,45,0);
doc.addImage(imageTags[0], 'png', 10, 10, 150, 100);
doc.save('sample.pdf');
}
by using this i am able to download the pdf file while open that pdf file in adobe reader its saying 110 error.
Can Anybody Help in this, thanks.
You should pass image URI to addImage():
google.charts.setOnLoadCallback(function() {
var data = google.visualization.arrayToDataTable(dataValues, true)
var chart = new google.visualization.CandlestickChart(document.getElementById(id))
chart.draw(data)
imgData = chart.getImageURI()
})
function generatePDF() {
var doc = new jsPDF();
doc.setFontSize(33);
doc.setFillColor(135, 124,45,0);
doc.addImage(imgData, 'png', 10, 10, 150, 100);
doc.save('sample.pdf');
}
Please check this live demo for more details https://jsfiddle.net/p1frmxvp/1/
UPDATE
Turns out the error happens only when we use jspdf 1.3.2 and open the pdf using Adobe Reader as explained here. The only solution so far is either opening the pdf using other viewer (Chrome, Foxit Reader .etc) or downgrading jspdf to 1.2.61. I have updated the jsfiddle above to use the downgraded jspdf.