Found the solution here it is, i was sending byte array from spring controller which is in the form like %PDF-1 %����. So i send base64 encoded string from spring controller and send the base64 encoded string to browser and it works.

javascript code :

var arrrayBuffer = base64ToArrayBuffer(data); //data is the base64 encoded string
function base64ToArrayBuffer(base64) {
    var binaryString = window.atob(base64);
    var binaryLen = binaryString.length;
    var bytes = new Uint8Array(binaryLen);
    for (var i = 0; i < binaryLen; i++) {
        var ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes;
}
var blob = new Blob([arrrayBuffer], {type: "application/pdf"});
var link = window.URL.createObjectURL(blob);
window.open(link,'', 'height=650,width=840');

convert byte array to base64 encoded string in spring controller

String encodedString = Base64.getEncoder().encodeToString(bytearrayofpdf);

In modern browsers, you can use a Blob to create an object URL which can then be used instead of a base64 URL (which has some limitations in different browsers, like length limits).

Here's a working example that does that. This sample displays the PDF inside an iframe, but you can really do whatever you want with that objectURL like open it in a new tab or whatever.

var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
    // Create the Blob URL:
    var buffer = xhr.response;
    var blob = new Blob([buffer], {
        type: 'application/pdf'
    });
    var objectURL = URL.createObjectURL(blob);

    // Create an iframe to demonstrate it:
    var iframe = document.createElement('iframe');
    iframe.className = 'sample-iframe';
    iframe.src = objectURL;
    document.body.appendChild(iframe);
    console.log(objectURL);
};
xhr.open('GET', 'https://gist.githubusercontent.com/AlexanderOMara/4cd0ae77a3027a8363eecb5929b30ee3/raw/900734831709f3cb94718649ca8f7f9715adeb78/hello-world.pdf', true);
xhr.send();

html, body {
  width: 100%;
  height: 100%;
}  
.sample-iframe {
  width: 90%;
  height: 90%;
}

Of course, the browser's built-in print function for the PDF will work also.

This works for me on Chrome, but not on IE:

// base64DataFromWebAPI comes from a Web API, in the form of base 64 string
var pdfData = base64DataFromWebAPI;

var x = window.open();
var iframe = x.document.createElement('iframe')
iframe.width = '100%'
iframe.height = '100%'
iframe.frameBorder = 0
iframe.style = "border: 0"
iframe.src = "data:application/pdf;base64, " + pdfData
x.document.body.appendChild(iframe);

I got it from the following Stack Oveflow question: JsPDF - Not allowed to navigate top frame to data URL

Nope there is no interface that would allow you to this sort of thing in the web-side security sandbox. The reason you aren't just downloading the PDF from the server is?...

CodeSAndbox Demo (open the result of the codesandbox in a new tab for it to work)

Hey Hiten,

Apparently in mozilla official documents for PDF.js, They say that no need to convert to Byte array (uint8Array), you can parse the base64 code into pdf directly....

Just render the iframe with data:application/pdf;base64 before the raw base64 data like this and it will appear :)

<iframe 
  title="frame"
  width="300px"
  height="700px"
  src={`data:application/pdf;base64,${this.base64PDF()}`} />

A good reference in another Stackoverflow Thread discussing rendering a pdf file using a base64 instead of url

I hope I have helped you

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

You would need to pass the responseType in your service call

$http.post('/Service-URL', dataTO, {responseType: 'arraybuffer'});

then in the success of your data call this should open up pdf in a new window:-

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

From this answer :- https://stackoverflow.com/a/21730535/3645957 by https://stackoverflow.com/users/2688545/michael

The Adobe Embed API can be used to display PDF files in modern browsers and can accept a Promise that resolves to an array buffer as input. The important part of the code might look like this...

adobeDCView.previewFile({
    content: { promise: Promise.resolve(buffer) }
    metaData: { fileName: :"myFile.pdf" }
}); 

It's free.