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');
})
Related
Using the jspdf library, I am creating a pdf file. It has headers. Site logo in headers. I noticed that for each sheet of the pdf file, the library reloads the logo (logo requests are visible in the Network tab). This slows down the formation of the pdf file. And in general, not very good, the picture is the same, why upload it several times.
Is it possible to make the image load not for each sheet of the pdf file, but once for the entire pdf file?
Here is the code to insert the image:
let doc = new jsPDF('p', 'pt');
...
let pageCount = doc.internal.getNumberOfPages();
...
let logoImg = new Image();
logoImg.src = logoImgPath;
...
for (let i = 1; i <= pageCount; i++) {
// This line inserts an image into a pdf sheet. In the Network tab in the browser, I noticed that the picture is loaded for each sheet. Is there any way to make that the image is loaded only once - for the entire pdf file?
doc.addImage(logoImg, 'png', 10, 10, 100, 80);
}
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'm using jsPDF to generate PDF files from HTML tables, but it takes more than one second to convert a simple table (5x10 cells) containing only text which is way too long for such a "simple" task. Below are the lines of code responsible for the conversion. What am I missing?
const doc = new jsPDF();
const htmlContent = liElements[i].firstChild as HTMLElement;
doc.html(htmlContent).then(() => {
const buffer = doc.output("arraybuffer");
resolve(buffer);
});
Don't have enough reputition to embedd an image, but here is an image of the profiler while exporting a 6 page pdf, where 4 pages use HTML.
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'm trying to convert a dendrogram like this one into a picture (png/jpg). Look what I've tried to do:
function get_dendrogram(){
var svg = document.querySelector('svg');
var data = (new XMLSerializer()).serializeToString(svg);
var blob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
saveAs(blob, "my_image.png");
}
To save the generated blob, I'm using FileSaver.js.
I don't know what I can be missing... When I try to open the file, It says that is corrupted.
I also tried converting the svg to canvas using html2canvas then saving with FileSaver or canvas2image. In these ways I got the image, but It is deformed.