2

I'm trying to convert the HTML content of a temporarily and locally on clients side into a real picture. I did my research canvas2base64canvas2base64html2base64, but nowhere is a real picture generated, it's always a "image" based on a base64 code.

It does what I want. It generates a picture in the quality I want it to. But the thing is, I would like to put this image into a PDF with jsPDF and when the image is a base64 code, it is not able to place it into the PDF.

I'm usig all of the following scripts: jquery.js, jspdf.js, html2canvas.js and FileSaver.js

Is there a way to temporarily generate a REAL image like a *.png or a *.jpg out of a canvas, which is not based on base64 code and is saved on the localStorage of the user? So i can reference to it and use it in my code?

The code down below should generate the image and then put the image into a PDF the size of a DIN A4.

function print() {
   //const filename  = 'Loveletter_.pdf';
   
   html2canvas(document.querySelector('.finishedLetter')).then(function(canvas) {
    var pdf = new jsPDF('p', 'mm', 'a4');
    $("#test_me").attr("src", canvas.toDataURL("image/png", 1.0));
    var ImgForPDF = document.getElementById('test_me').getAttribute('src');
    pdf.addImage(ImgForPDF, 'PNG', 0, 0, 211, 298);
   });
   pdf.save('Loveletter_.pdf');
  }
Kamalesh M. Talaviya
  • 1,422
  • 1
  • 12
  • 26
Smoerk
  • 23
  • 2
  • In short, you wanted to create a PDF from HTML content. Right?? – AKNair Jan 23 '19 at 13:13
  • Yes. I tried it with the detour of the html to image to pdf because I want to keep my CSS styles and I didn't found a way otherwise. I'm coding a Loveletter generator. After you clicked through the phrases and finished the letter, you'll have a couple of different styles you can choose from. After you decided which style you want, you can download your Loveletter as a PDF with your chosen style. – Smoerk Jan 23 '19 at 13:17

2 Answers2

1

Thanks for the confirmation. Please try this method, which will not hamper your css properties and give you a printable PDF file:

function print() {


// Generating PDF using HTML2Canvas
  html2canvas(document.body,{
    useCORS: true, 
    onrendered:function(canvas){
      var img=canvas.toDataURL("image/png");
      var imgData = canvas.toDataURL('image/png');
      var imgWidth = 210;
      var pageHeight = 295;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      var doc = new jsPDF('p', 'mm');
      var position = 0;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save('myDoc.pdf');
    }
  });

}
AKNair
  • 1,369
  • 1
  • 12
  • 24
  • Thank you very much for your quick input! If I now click on the button with the print() function, i get this out of the console: https://imgur.com/a/SfLQFvt. There is no PDF generated in my root directory. If I understand the whole thing right, there should be a PDF in my folder, right? – Smoerk Jan 23 '19 at 13:43
  • Correct. If you are calling this function on button click, try this way $(document).on('click', '#printButton', function(){ html2canvas(document.body,{ // your code }); }); – AKNair Jan 23 '19 at 13:59
  • Nice! This now works and exports a PDF with the content I want. The only question which remains is, how do I exclusively export the html content and not the header and footer with the link and pagenumbers on the pdf? And why is the Downloadbutton exported? I tried to just export everything inside the
    and not the whole page. https://docdro.id/ZSah38Z
     – Smoerk Jan 23 '19 at 14:29
1

Nice to hear that the solution works for you. Please up-vote the answer which solved your issues. To solve your latest question that is if in case, you only want some specific div to be captured in the PDF, you can use this technique:

 $(document).on('click', '#download_button', function(){

  // Settings before generating PDF
  $('header').hide();
  $('footer').hide();

  // Generating PDF using HTML2Canvas

  html2canvas(document.body,{
   //Your code
  });

  // Reset properties which was updated before PDF generation
  $('header').show();
  $('footer').show();

});
AKNair
  • 1,369
  • 1
  • 12
  • 24
  • Yes I upvoted it! :) Thank you for your clear help! I really appreciate it. The thing is with the header and footer in the pdf, its not in the HTML. Its generated when I export the PDF. https://imgur.com/a/8dX8de2 The yellow highlighted part is the filepath, the name of the PDF, the pagenumber of the PDF and the exportdate is nowhere in my code. Is there a way I can disallow the export of the metadata in the geneated pdf wit jspdf or any other way? – Smoerk Jan 24 '19 at 08:23