0

Hi I have converted my html page to canvas image and then turned that image to pdf using jspdf library. Now I want to call the ajax function POST or $.post function and send that pdf file link to backend and send it to email using our own email template. In that email template, I have using <a> which should contain the url of that pdf that was passed from front-end. Following is some line of code I have used in my function.

Index.php

<script type="text/javascript">
html2canvas(document.querySelector(".certificate_holder")).then(canvas => {
    image.src = canvas.toDataURL("image/png");
    pdf.addImage(image.src, 'PNG', 0, 0);
    sendEmail(image.src)

    function sendEmail(pdflink){
            $.post("/pdfController/sendEmail",{link:pdflink}, function(data){
                console.log(data);
            })
        }    
</script>

In the above code, I am getting the image link using toDataUrl which is in Basecode(which is very long), instead I want actual link that I can use in <a href="pdflink">. Is there any way where I can generate or get a pdf-link using jspdf library?. Another alternative is getting a short actual link from Basecode URL that I have in above code which is image.src. Help is appreciated.

John Caverns
  • 67
  • 2
  • 11
  • I'm not sure I understand fully what are you doing. Are you saving your PDF? Send the saved link to the backend. – yomisimie Jul 03 '18 at 14:34
  • @yomisimie I tried saving pdf like this: `pdf.save("certificate.pdf");`. Now as you mentioned sending the saved link to back-end, it would be great if you can tell me how can I send the saved link to backend ? – John Caverns Jul 03 '18 at 14:42
  • You have to manually create the link then, your home URL + folder in which you save the file + file name. That should get you the final url so you can access the file. – yomisimie Jul 03 '18 at 14:43
  • Got you. Will try that. Thankyou. I appreciate – John Caverns Jul 03 '18 at 14:52
  • I tried downloading file to my project folder. But it's not even downloading now. Instead showing an error "Invalid Regular Expressions Flags". So I tried to research on it and found that it is not possible to download a file at specific folder and it will save the file to default 'Download' folder. So are there any other options ? – John Caverns Jul 03 '18 at 15:31
  • Did you save the file on the server? – yomisimie Jul 03 '18 at 15:33
  • What do you mean by server ? – John Caverns Jul 03 '18 at 15:36
  • Well, if you want to send an URL to someone in the mail, the file has to be on a server. Are you running a local project? – yomisimie Jul 03 '18 at 15:37
  • Yes I am running it on local. – John Caverns Jul 03 '18 at 15:48
  • I would suggest using a server-side solution - something like PrinceXML or PhantomJS or even something sophisticated like https://github.com/alvarcarto/url-to-pdf-api – IVO GELOV Jul 03 '18 at 17:47
  • @IVOGELOV Thanks for your output, but my problem is to get the pdf url and send it to backend. I don't have any problem in generating PDF. – John Caverns Jul 03 '18 at 18:36
  • Actually your problem is sending/uploading the PDF to the backend and getting back the resulting URL into the frontend - the opposite of what you are stating. Are you asking how to upload a data URI (saved from a Canvas) with AJAX ? Simply do `canvas.toBlob(myCallback,"image/jpeg",0.8)` and in the callback create a FormData object and add the blob data (1st arg of the callback) to the FormData. Browser will add the proper headers in the XMLHttpRequest. – IVO GELOV Jul 03 '18 at 19:33
  • @IVOGELOV Can you show me example or if you can provide a link from where I can learn. Thanks – John Caverns Jul 06 '18 at 12:57
  • You may take a look at this CodePen https://codepen.io/TMCDOS/pen/LrwJLx – IVO GELOV Jul 08 '18 at 11:49

0 Answers0