PDF Returned from HTTP Response is Blank

[msalamonjl]

I have created a flow that acts like a web service. There is an HTTP Request to trigger the flow.  The body of the flow generates a PDF document.  I know that the PDF document is generated successfully because I can both download it from the step where it is created and I can attach it to an email step and view the correct pdf attachment when the email is received.

The last step of the flow is an HTTP Response that returns the PDF file, to be consumed by the caller.  However, the PDF file that is returned is blank.  It is not a zero-byte file. Indeed, this blank file has approximately the same number of pages as the correct file that I receive via email.  But all of the pages are empty.

I suspect the problem is that the server is not returning the PDF file correctly, although the problem could instead or also be how it is being handled on the client side (which is using ajax/jquery).  

I found a few articles that seem to point me in the right direction, that perhaps it's a base64 encoding issue. See, for ex, https://stackoverflow.com/questions/64106168/pdf-is-blank-and-damaged-when-downloading-it-from-api-u... and https://stackoverflow.com/questions/34436133/pdf-is-blank-when-downloading-using-javascript but in particular:  https://stackoverflow.com/questions/51981473/downloaded-pdf-looks-empty-although-it-contains-some-da...:

You are experiencing "byte shaving". Bytes consist of 8 bits. For ASCII, only 7 bytes are needed. PDFs are binary files, they need every bit, but some processes treat PDFs as if it were text files, and they remove the highest bit. When that happens, the structure of the PDF consisting of ASCII characters is preserved (which is why it opens in a viewer), but the binary content of the pages is corrupted (which is why the pages are blank).

Assuming that is the problem, I have not been able to fix it.  I have taken the body of the PDF file that is generated and attempted to transform it using each of the available base64 expressions (base64, base64ToBinary, base64ToString and decodeToBase64), just to be comprehensive.  I have also set the content-type to application/pdf, but also tried application/octet-stream.

Here is my client side code (I show 2 approaches, but the first one typically fails completely with an error).  Note I am using Jquery 1.81.

  $.ajax({
  url: '[link to flow request]',
  type: 'POST',
  headers: {'Content-Type': 'application/json'},
  data: JSON.stringify(...),
  success: function(response){   
    console.log(response);
    
    var a = document.createElement('a');
    a.style = 'display: none';
    
/* 
(1) first approach
  this returns an error: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed    
    var url = window.URL.createObjectURL(response);
*/

/* (2) Second approach*/
    
 var binaryData = [];
 binaryData.push(response);
 var url = window.URL.createObjectURL(new Blob(binaryData, {type: "application/pdf"})); 

// I have also tried application/octet-stream 
     
    a.href = url;
    a.download = outputFileName;
    document.body.append(a);
    a.click();
    a.remove();
    window.URL.revokeObjectURL(url);
  }
});

Here is a screenshot of the relevant portions of my flow.  The "Outputs" referenced in the Response is the content of the prior step (GetPDFFIle) btw.

Any thoughts on how to get this working?

[msalamonjl · Accepted solution]

I figured it out from searching the web.  The issue was client side.  Here is the solution using straight JS:

var req = new XMLHttpRequest();  
req.responseType = "blob";
req.open("POST", "[URL]", true);
req.setRequestHeader('Content-Type', 'application/json');
req.onreadystatechange = function () {
    if (req.readyState === 4 && req.status === 200) {
        if (typeof window.chrome !== 'undefined') {
            // Chrome version
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(req.response);
            link.download = outputFileName;
            link.click();
        } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
            // IE version
            var blob = new Blob([req.response], { type: 'application/pdf' });
            window.navigator.msSaveBlob(blob, outputFileName);
        } else {
            // Firefox version
            var file = new File([req.response], outputFileName, { type: 'application/force-download' });
            window.open(URL.createObjectURL(file));
        }
        callback();
    }
};
req.send(JSON.stringify([JSON_OBJECT]));