Vfrdtyky

I have a page where several buttons process different functions like sending a sms (via API), sends a file by email, or downloads a PDF file. Button actions dont use forms, but uses ajax requests via javascript.

I used to create a pdf file using javascript (jspdf), but have written code which generates a pdf file by python on the server. Now I need to allow download when the button is clicked.

Server code snippet:

with NamedTemporaryFile(mode='w+b') as temp:

    from django.http import FileResponse

    doc = SimpleDocTemplate(temp.name, pagesize=A4, rightMargin=20, leftMargin=20, topMargin=20, bottomMargin=20, allowSplitting=1, title="Prescription", author="MyOPIP.com")

    doc.build(elements)

    print(f'Generated {temp.name}')

    return FileResponse(open(temp.name, 'rb'), content_type='application/pdf')

The above code is supposed to download a pdf file, if called by navigating to the url.

On my javascript side, I tried to determine what I'm receiving:

$.ajax({

    url: `/clinic/${cliniclabel}/prescription/download/patient/${patient_id}`,

    dataType: "html",

    data: data,

    type: 'POST',

    success: function (data) {

        console.log("Received data from server..type is ", typeof(data))

        console.log(data)

    }

});

And I get:

Received data from server..type is  string

%PDF-1.4

%���� ReportLab Generated PDF document http://www.reportlab.com

1 0 obj

<<

/F1 2 0 R /F2 5 0 R

>>

endobj

2 0 obj....

Apparently django sends this as a file stream. How can I get the file downloaded to the user when the response is processed by javascript?

It is impossible to do it through Ajax because JavaScript cannot save files directly to a user's computer (out of security concerns).

That being said, the work around would be to set the "src" of an anchor tag to the url for the file download and trigger a click on it.

Note: You'll have to change your function method from POST to GET

• Change the "button" to an "a" link and have src="#" in the html.


• Add an ng-click to it to trigger a JS function


• In the JS function, do not call event.PreventDefault(); and then update the "src" of the "a" tag.


• Once function is done executing, then it'll trigger the normal click on the <a> tag anyway (with the source updated)

I haven't tested the above; so if that doesn't work, move the try the following:

• Keep the button as is


• Add a new hidden <a> tag with src="#"
  


• In the JS function, update the src of the <a> tag and trigger click on the element.

Comment under here if you have any questions.