This do the trick for me.

$.ajax(
{
   url: "myServlet",
   ...
   complete: function(data) {
        $('#myframe').attr('src','data:application/pdf;base64,'+data);
   }
 }
);

Also, you should encode the ajax ans this way base64_encode($data).

I hope you find this helpful.

You have to alter your getPDF() method and prepend data:application/pdf;base64,

public String getPDF() {
        return  'data:application/pdf;base64,'+EncodingUtil.base64Encode([SELECT VersionData FROM ContentVersion WHERE ID = :RecordID].VersionData);
    }

Markup:

 <iframe src="{!PDF}" height="100%" width="100%"></iframe>

You can just return it using File. Something like this:

public ActionResult ShowPDF()
{
  byte[] pdf = myService.GetPDF();
  return File(pdf, "application/pdf");      
}

UPDATE

Create a page containing a iframe element and set the src attribute to point to your view that renders the PDF file. Here is an example taken from here

<iframe src="ShowPDF" width="100%" style="height:20em">

 [Your browser does <em>not</em> support <code>iframe</code>,
 or has been configured not to display inline frames.
 You can access <a href="ShowPDF">the document</a>
 via a link though.]

</iframe>

1. Download the binary data with ajax, into an arraybuffer

var xhr = new XMLHttpRequest;
xhr.open('get', '/path/to/pdf', true);
xhr.responseType = 'arraybuffer';
xhr.send();

2. Create Blob and Object URL

var blob = new Blob([xhr.response], {type: 'application/pdf'});
var url = URL.createObjectURL(blob);

3. Load URL in iframe

iframe.src = url;

Demo: https://webblocks.nl/tests/ajax-pdf.html

Using an iframe to "render" a PDF will not work on all browsers; it depends on how the browser handles PDF files. Some browsers (such as Firefox and Chrome) have a built-in PDF rendered which allows them to display the PDF inline where as some older browsers (perhaps older versions of IE attempt to download the file instead).

Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.

In your HTML, you could set up a div to display the PDFs:

<div id="pdfRenderer"></div>

Then, you can have Javascript code to embed a PDF in that div:

var pdf = new PDFObject({
  url: "https://something.com/HTC_One_XL_User_Guide.pdf",
  id: "pdfRendered",
  pdfOpenParams: {
    view: "FitH"
  }
}).embed("pdfRenderer");

If someone is facing the issue, here is how I have resolved it.

On the above code, I was creating a Blob of pdf binary manually, I am not sure what was causing the issue that for one pdf it was working and for another, it was not working but now I changed my code and instead of creating blob manually I am using $http (I am using AngularJS) to get blob by using responseType: "blob".

Code -

    $http({
      url: settings.url,
      method: "GET",
      responseType: "blob",
      headers:{
       "Authorization": "Bearer <?php echo $jwt; ?>"
      }
     }).then(function(response) {
      var fileURL = URL.createObjectURL(response.data);
      $('#iframePdfURL').attr('src',fileURL);
   });

As I am using AngularJS I used $http but I found we can also do the same and request blob as responseType with fetch API.

I hope this will help.

You can choose to render it directly through JS code, after you download the file with HttpRequest... People are making JS PDF readers for HTML5 - See here http://andreasgal.com/2011/06/15/pdf-js/

The other option is to embed it with an Iframe option