0

Hi All Im having alot of trouble trying to post a PDF file generated via jsPDF using javascript. I use the pdf.output('datauristring') method to get the base64 of the PDF file but i cannot understand how to send this to the controller without getting an 'Illegal Invocation' Error in console.

function testPdfSend() {
        let pdf = new jsPDF('p', 'pt', 'a3'); // a4: part of the page is cut off?
        pdf.html(document.body, {
        callback: function (pdf) {
            var pdfContent = pdf.output('datauristring');
            $.ajax({
                url: "/Jobs/SendEmailTest",
                type: 'POST',
                contentType: 'application/json',
                data: {data : JSON.stringify(pdfContent)}
            });
            }
        });
    }

Controller/Server side code:

public ActionResult SendEmailTest(string data)
    {
        //create pdf
        var pdfBinary = Convert.FromBase64String(data);
        
        return null;
    }

UPDATE:

have tried using output('blob') method which I can see the controller method being hit however the data string is null.

function testPdfSend() {
        var doc = new jsPDF("l", "pt", "letter");
        var file = doc.output('blob');
        var fd = new FormData();     // To carry on your data  
        fd.append('data',file);

        $.ajax({
            url: "/Jobs/SendEmailTest",
            data: fd,
            dataType: 'text',
            processData: false,
            contentType: false,
            type: 'POST'
        });
    }

server method unchanged

Paul
  • 51
  • 7
  • Hi, this answer recommends to use `blob` instead of `datauristring` https://stackoverflow.com/a/38562622/2079345 – chiliNUT Aug 20 '23 at 14:51
  • Hi using the output('blob') does solve the issue of illegal invocation however I am not able to receive the data parameter of server method SendEmailTest, have updated my question. @chiliNUT – Paul Aug 20 '23 at 15:26

1 Answers1

1

Okay so I've managed to find a solution that works (thanks for direction chiliNUT). I've applied it to my intended use Invoice pdf web app and this also is now working as expected. Can someone with better coding knowledge let me know if this solution is any good though? I have never used the 'Request.Form' to access form data, is that a correct use?:

var file = doc.output('blob');
        var fd = new FormData();     // To carry on your data  
        fd.append('testString',file);

        $.ajax({
            url: "/Jobs/SendInvoiceEmail",
            data: fd,
            dataType: 'text',
            processData: false,
            contentType: false,
            type: 'POST'
        });

server side:

public ActionResult SendInvoiceEmail(byte[] testString)
    {
        //create pdf file
        var file = Request.Form.Files[0];
        string fileName = Path.GetFileName(test.FileName);
        var attachment = new Attachment(file.OpenReadStream(), "invoice.pdf");                 
             //From here the attachment when emailed shows as intended as a .pdf file                            
    }
Paul
  • 51
  • 7