I know this has been asked before but I can't seem to find the answer, how to add page break, my page cut if convert to pdf ..??
html2canvas(document.getElementById("content")).then(function (canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF({
orientation: "landscape",
format: "a4",
});
doc.addImage(img, "JPEG", 1, 5);
doc.save("testCanvas.pdf");
});
For PDF conversion, use this library instead, it supports break pages :
https://github.com/eKoopmans/html2pdf
Related
I'm using jspdf to generate pdf from dom locally, code like:
var jsPDF = window.jspdf.jsPDF;
var pdf = new jsPDF('p', 'pt', 'a4', true);
pdf.html(document.body, {
autoPaging: true,
margin: [12, 8, 15, 8],
callback: function (pdf) {
pdf.save("1.pdf");
}
});
It works but the images gets cut off to different page.(My dom includes lots ofimg tag)
And if I print pdf from html directly I can use something like -webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid; to avoid images getting cut off, but it didn't work in jspdf.html, any solution here?
I have been building a bottle label making application using React. People are able to create customized labels as they want. I have already add the functionality to let the users download the results in the form of a PDF.
Generating a PDF file from React Components
I implemented download React component to PDF by reference above link.
html2canvas & jsPDF.
Btw there's a quality issue. If I zoom in the downloaded PDF file, the quality is not good. (React component size is 380px * 380px).
Instead of it, if I zoomin(500%) the chrome browser and then download PDF, the quality is very good even zoom in on PDF reader(Foxit Reader or Chrome PDF Viewer).
Maybe the PDF resolution that downloaded using the html2canvas & jsPDF seems like according on component size.
So I have to ask customers to download PDF after they zoomin the browser(500%) if they want PDF with high resolution? lol. That's not.
I read the several articles about downloading PDF but not find solution yet.
Is there any method to implement above function as code?
As reference, this is my code which download pdf using html2canvas & jsPDF.
const printRef = React.useRef<HTMLDivElement>(null);
...
const handleDownloadPdf = async () => {
const element: any = printRef.current;
const canvas = await html2canvas(element);
const data = canvas.toDataURL("image/png");
const pdf = new jsPDF("portrait", "px", [380, 380]);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
pdf.addImage(data, "PNG", 0, 0, pdfWidth, pdfHeight);
pdf.save("label.pdf");
};
...
<div ref={printRef} style={{ height: "380px" }}>
<Label/>
</div>
I found another solution. I should control the size of canvas.
html2canvas(element, {
scale: 5,
}).then(function (canvas) {
var data = canvas.toDataURL("image/png");
pdf.addImage(data, "PNG", 0, 0, pdfWidth, pdfHeight);
pdf.save("label.pdf");
});
I am using jsPDF to convert html into PDF file.
This is what it looks like from the browser:
This is the PDF file:
Here is my code:
const doc = new jsPDF();
doc.html(document.getElementById('print-content')!, {
callback: function (doc) {
doc.save(activeSales?.ID + '.pdf');
},
});
How to make it responsive when generating the pdf?
I want to generate it in A4 width.
i know this is too late, but I faced the same issue before.
You can use another library called jsPDF-AutoTable which will make it easier for you to work with tables.
Here's the doc : https://github.com/simonbengtsson/jsPDF-AutoTable
My goal is to save some parts of the view from current window as a PDF file, using canvas first. I used a solutions proposed in this tutorial.
$('#to_pdf').on('click', function(){
const filename = "myfile.pdf"
html2canvas(document.querySelector('#myElement'))
.then(canvas => {
let pdf = new jsPDF('p', mm', 'a4')
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0,0,211,298)
pdf.save(filename)
})
})
After clicking on button with 'to_pdf' id html2canvas should transform part of my view into canvas and then save it as pdf to the user's directory. Im inside this function, everything is executed without any errors. However pdf.save(filename) is not working since I cannot save pdf.
Is this an electron restriction which prevent me from saving files by default? How can I fix it?
This Code is working fine(single quote is missing)
after i add single quote
let pdf = new jsPDF('p', mm', 'a4')<----------jsPDF('p', 'mm', 'a4')
working code in my electron app
$('#to_pdf').on('click', function(){
const filename = "myfile.pdf"
html2canvas(document.querySelector('#myElement'))
.then(canvas => {
let pdf = new jsPDF('p', 'mm', 'a4')
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0,0,211,298)
pdf.save(filename)
})
})
I've created a pdf in my program using jspdf, I'm providing an option to download as image or as pdf, so Can I use jspdf in some way or the pdf I created using jspdf in someway to store it as image?
I
Transform HTML into image first and then into PDF. To turn HTML into image uses the html2canvas and through the addImage method you create the PDF.
Example:
const html_source = document.getElementById('contentID'); // Get html
html2canvas(html_source).then(function(canvas) { // Convert to canvas
let imgData = canvas.toDataURL('image/png'); // Generates image that you can store
let pdf = new jsPDF('p', 'mm', 'a4'); //Create PDF, Note that you use the same image to create the PDF
pdf.addImage(imgData, 'PNG', 10, 10);
pdf.save('test.pdf');
})