Return PDF from Controller called via jQuery AJAX

Question

I found some answers about using a controller to create a PDF from EvoPDF however none seem to deal with the controller being called via jQuery AJAX.

I have a simple jQuery function that sends data to a controller much like many others in my app:

$.ajax({
    url: "/AnnualFees/showStatement",
    cache: false,
    data: {
        authKey: memberData.authKey,
        entityId: memberData.entityId,
        barNumber: memberData.barNumber,
        statementHTML: encodeURIComponent($("#statementBody").html())
    },
    method: "POST",
    success: function (data) {
    },
});

I followed all the samples and have this code. I can change it to save the PDF and confirm that the PDF is being generated.

public ActionResult getStatementPDF(string statementHTML)
{
    //initialize the PdfConvert object
    PdfConverter pdfConverter = new PdfConverter();

    // set the license key - required
    pdfConverter.LicenseKey = "uzUmNCcnNCYsIjQgOiQ0JyU6JSY6LS0tLQ==";

    StringBuilder PDFBody = new StringBuilder();
    PDFBody.Append("<!DOCTYPE html>");
    PDFBody.Append("<html lang=\"en\">");
    PDFBody.Append("<head>");
    PDFBody.Append("    <meta charset=\"utf - 8\">");
    PDFBody.Append("    <title>Statement</title>");
    PDFBody.Append("</head>");
    PDFBody.Append("");
    PDFBody.Append("<body>");
    PDFBody.Append("Hello world.");
    PDFBody.Append("</body>");
    PDFBody.Append("</html>");

    byte[] outPdfBuffer = pdfConverter.GetPdfBytesFromHtmlString(PDFBody.ToString());

    // Send the PDF file to browser
    FileResult fileResult = new FileContentResult(outPdfBuffer, "application/pdf");
    fileResult.FileDownloadName = "Statement.pdf";

    return fileResult;
}

I can confirm their are no errors and that a 200 success is returned with the right application/pdf type and about the same size as on disk. However, no PDF ever appears, nothing opens in the browser.

Nothing happens because the callback does nothing in response to the AJAX request. Plus file download will not work with ajax. What you want is generate and save the PDF file on the server and return a URL pointing to that file so then the browser can be redirected in the callback. — marekful, Nov 18 '16 at 23:26
I would like to avoid at all costs having to save the PDF since at this stage, the PDF is a draft copy of the final document. I see sample code to stream the PDF to the browser but it's just not working. Is it just not possible? — Connie DeCinko, Nov 21 '16 at 17:47

score 0 · Answer 1 · answered Nov 18 '16 at 23:27

0

You need to handle the data onSuccess in the ajax call, you can do something like this to open the file, you may want to use FileSaverJS (https://github.com/eligrey/FileSaver.js/) if you want to save the file

success: function (data) {

    var file = new Blob([data], { type: 'application/pdf' });
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
}

answered Nov 18 '16 at 23:27

Anthony C

2,117
2
15
26

1

Is this opening the file stream or is it expecting the file to exist on the server? Since this step generates a draft PDF, I'd like to avoid polluting the server and just push a memory copy of the PDF file to the browser. – Connie DeCinko Nov 21 '16 at 17:48
2

This tries to work but I'm getting this for the fileURL and just an empty tab opens: blob:E9D06943-1619-4B89-BCF9-CD208BB9BAA9 – Connie DeCinko Nov 21 '16 at 17:59
in the ajax call, please add $.ajax({ url: "/AnnualFees/showStatement", cache: false, responseType: 'arraybuffer', .... – Anthony C Nov 21 '16 at 19:42

Return PDF from Controller called via jQuery AJAX

1 Answers1