Currently I have a page where user can click-together a report and save this to a pdf with the following code:
document.getElementById('report').onclick = function () {
// Default export is a4 paper, portrait, using milimeters for units
html2canvas(document.body, {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 0, 0);
doc.save('test.pdf');
}
});
}
Is it possible that we can do this multiple times and add all pages to one pdf? Finally when the user clicks another button I want to download the pdf with all the added pages.
Related
help with exporting convas image to excel file here is what i tried via bible jsPDF and via FileSaver:
html2canvas(document.getElementById("get_images")).then(function(canvas) {
var my_screen = canvas;
var dpf = new jsPDF();
saveAs(my_screen.toDataURL(), 'fdlfs.xlsx')
dpf.addImage(my_screen.toDataURL(), 'JPEG', 0, 0)
dpf.save("dowld.xlsx")
});
}
I need to create nicely formatted PDFs from website pages that vary greatly in layout and content. The closest I've come to success is with extensive #media print {} CSS on a page-by-page basis, using the browser's print dialog, then choosing 'Save As PDF' in the print dialog.
I'd like to do all that natively in the app without relying on the print dialog, and I've spent hours trying to beat jsPDF into submission with no luck. Most of my pages include jpgs and svgs as well as text and I have tried html2canvas, dompurify & canvg in conjunction with jsPDF.
I don't mind having to use lots of custom CSS to get it looking good in the PDF, but I can't even get all the elements to appear in the downloaded PDF. Most of the time it's just blank, or one random element.
Doesn't work:
downloadPDF() {
const doc = new jsPDF();
const contentHtml = this.html;
doc.fromHTML(contentHtml, 15, 15, { // error: fromHTML is not a function
width: 170,
});
doc.save("sample.pdf");
},
Also doesn't work:
downloadPDF() {
const doc = new jsPDF();
/** WITH CSS */
var canvasElement = document.createElement("canvas");
html2canvas(this.$refs.printArea, { canvas: canvasElement }).then(function (canvas) {
const img = canvas.toDataURL("image/jpeg", 0.8);
doc.addImage(img, "JPEG", 20, 20);
doc.save("sample.pdf");
});
},
Also also doesn't work:
downloadPDF() {
const pdf = new jsPDF({
orientation: "p",
unit: "pt",
format: "letter",
putOnlyUsedFonts: true,
});
pdf.setFontSize(11);
pdf.html(this.html, {
callback: function (pdf) {
pdf.save("download.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.
Using html2canvas to try to create pdfs and/or pngs and its working, except it only renders the visible section of the screen.
Anyone have any idea how to fix this?
//create pdf
$(document).ready(function() {
$('#downloadpdf').click(function() {
html2canvas($("#fullreporttoprint"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('mywindassessment.pdf');
}
});
});
});
Before someone marks this, I've checked everywhere online and SO for this problem, and was unable to find a working solution.