laravel-report-generator icon indicating copy to clipboard operation
laravel-report-generator copied to clipboard

Generating a report with Ajax

Open danielalejandromatheus opened this issue 6 years ago • 6 comments

Can I generate a report with an Ajax request? I'm using JQuery's ajax method to pass the data to my controller, it gets to the server but the response is odd, is there a way to generate the report in a pop-up window o a blank window?

danielalejandromatheus avatar Aug 03 '18 14:08 danielalejandromatheus

@hitostacha Can you provide a source code to this issue?

Jimmy-JS avatar Aug 07 '18 07:08 Jimmy-JS

On frontend side set responseType: 'arraybuffer' , and add to url param I'm using Axios:

        let config = { responseType: 'arraybuffer' };
        axios.post('frontend/generateCountReport', your_data, config)
        this.downloadFilePDF(response.data, 'report');

        downloadFilePDF(response, filename) {
            // It is necessary to create a new blob object with mime-type explicitly set
            // otherwise only Chrome works like it should
            let newBlob = new Blob([response], {type: 'application/pdf'});

            // IE doesn't allow using a blob object directly as link href
            // instead it is necessary to use msSaveOrOpenBlob
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(newBlob);
                return
            }
            // For other browsers:
            // Create a link pointing to the ObjectURL containing the blob.
            const data = window.URL.createObjectURL(newBlob);


            let link = document.createElement('a');
            link.href = data;
            link.download = filename + '.pdf';
            link.click();
            setTimeout(function () {
                // For Firefox it is necessary to delay revoking the ObjectURL
                window.URL.revokeObjectURL(data)
            }, 100)
        }

ArtyomBist avatar Aug 07 '18 10:08 ArtyomBist

@skortabeast are you retrieving the Stream of the PDF as a normal string or a encoded base64 string?

danielalejandromatheus avatar Aug 09 '18 14:08 danielalejandromatheus

Also, are you displaying the PDF document or downloading it? I managed to get it working opening a new blank window, and appending the stream to an iFrame, but I doubt this is the best way to get this working @Jimmy-JS This is my JS code

$.ajax({
                        url: '/generatepdfurl',
                        method: 'POST',
                        data: data,
                        contentType: false,
                        processData: false,
                        success: function(data){
                            let pdfWindow = window.open("");
                            pdfWindow.document.write("<iframe style='border: none;' width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(data)+"'></iframe> <style> body{margin:0;}</style>")
                        }
                }

danielalejandromatheus avatar Aug 09 '18 14:08 danielalejandromatheus

@hitostacha downloading it, and appending the stream to an iFrame, but I doubt this is the best way to get this working - it's working for you?

ArtyomBist avatar Aug 10 '18 12:08 ArtyomBist

I have the same issue, im getting ajax response stream() but it show a bunch of symbols and letters so I think im not handling correctly the ajax response to display de pdf stream, Im using this code inside my done function

var pdfWin= window.open("data:application/pdf;base64, " + data, '', 'height=650,width=840');

It opens a new windows but just print this code:

error

NirvashType0 avatar Feb 07 '19 19:02 NirvashType0