I am trying to use html2canvas and jsPDF to get a PDF of the content of the page,
The idea is that someone could fill data and then print the CV created, but i want to be able to create a A4 pdf from any device, i tried to read the documentation of both libraries but i can't seem to make it work:
This is the output i am getting in the mobile and desktop versions:
Link to screenshots
EDIT:
I tried to configure both html2canvas and jsPDF in PT size:
const printDocument = () => {
setPrintable(true)
const input = document.getElementById('final-section');
html2canvas(input, {
height: 2970,
width: 2100,
scale: 1,
onclone: (cloned) => {
let toPrint = cloned.querySelector("#final-section");
toPrint.style.height = '841.88pt';
toPrint.style.width = '595.27pt';
toPrint.style.position = 'absolute';
toPrint.style.top = 0;
toPrint.style.left = 0;
}
})
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
unit: 'pt',
format: 'a4'
});
pdf.addImage(imgData, 'JPEG', 0, 0, 841.88, 595.27);
// pdf.output('dataurlnewwindow');
pdf.save("download.pdf");
})
;
}
The markup of the html is a content div that contains a modifiable section and the final section that is the printable, in desktop the modifiable section has 45vw and the final section 55 vw,
In mobile each section occupy 100vh and 100vw,
Related
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 am trying to save my html page as a PDF domtoimage.toPng(document.getElementById('PrintForm'))
.then(function (blob) {
var pdf = new jsPDF('p', 'pt', [$('#PrintForm').width(), $('#PrintForm').height()]);
pdf.addImage(blob, 'PNG', 0, 0, $('#PrintForm').width(), $('#PrintForm').height());
pdf.save("test.pdf");
that.options.api.optionsChanged();
});</pre>
In this I can't able to get my select tag value am while am saving as pdf i will get the Default in the select tag.Like below
Try this...
var obj = $(".yourclassname")[0]
var srcwidth = obj.scrollWidth;
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(obj, {
html2canvas: {
scale: 600 / srcwidth
//600 is the width of a4 page. 'a4': [595.28, 841.89]
},
callback: function () {
window.open(pdf.output('bloburl'));
}
});
Where yourclassname is your object in the page (or #yourobjectid). srcwidth is the width calculation so your html fits the width of the page. You might need to add some padding to the html to fit inside the pdf (I added 20px to my div). You should be using this version 1.5.3 of jsPdf for the above to work. Hope this helps (works perferctly for me). You should also be using the latest version of html2canvas 1.0.0-rc.5
I am hoping to use html2canvas and jspdf to download a multi page PDF.
I can do single pages no problem with the following:
printDocument = () => {
const input = document.getElementById('divToPrint');
html2canvas(input, {scale: 4,})
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('l', 'pt', 'a4', true);
var width = (pdf.internal.pageSize.getWidth() * 0.90);
var height = (pdf.internal.pageSize.getHeight() * 0.90);
pdf.addImage(imgData, 'PNG', 0, 0, width, height, '','FAST');
// pdf.output('dataurlnewwindow');
pdf.save("download.pdf");
});
I also know I can add a page with the following:
pdf.addPage();
If I had a three page document split into 3 divs <div id="divToPrint1"> ... </div>, <div id="divToPrint2"> ... </div>, and <div id="divToPrint3"> ... </div> how would I create and download all 3 pages together.
Any help is greatly appreciated!
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'm using html2canvas and jsPdf to generate Pdf from HTML for one react application.
onClick of my download button I call this function :
printDocument() {
const input = document.getElementById('divToOfferInfo');
const pdf = new jsPDF();
if (pdf) {
html2canvas(input, {
useCORS: true
})
.then(canvas => {
const imgData = canvas.toDataURL('image/png');
console.log(imgData); //Maybe blank, maybe full image, maybe half of image
pdf.addImage(imgData, 'PNG', 10, 10);
pdf.save('download.pdf');
});
}
}
The result is totally random. The result of canvas is full, half or blank but not right.
I think that issue is about rendering of React.
Thank you for your help.
I found an alternative solution. Instead to use html2canvas lib, we can use dom-to-image lib. It's working with it.
import domtoimage from 'dom-to-image';
...
printDocument() {
const input = document.getElementById('divToOfferInfo');
const pdf = new jsPDF();
if (pdf) {
domtoimage.toPng(input)
.then(imgData => {
pdf.addImage(imgData, 'PNG', 10, 10);
pdf.save('download.pdf');
});
}
}
You can use like this. I am using this code and it is working well.
savePDF() {
const printArea = document.getElementById("printWrapper");
html2canvas(printArea).then(canvas => {
const dataURL = canvas.toDataURL();
const pdf = new jsPDF();
pdf.addImage(dataURL, 'JPEG', 20, 20, 180, 160);
pdf.save('saved.pdf')
})
}