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

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.

You're missing one step. The embedded PDF needs to be encoded.

The following is from a similar smallish PDF. I encoded it into base 64 by uploading the PDF to site http://www.motobit.com/util/base64-decoder-encoder.asp.

I then pasted the base64 result into my embedded element as follows:

<embed width="100%" height="100%" src="data:application/pdf;base64,JVBERi0xLjMKJaWx6woxIDAgb2JqCjw8IC9UeXBlIC9DYXRhbG9nIC9QYWdlcyAyIDAgUiA+Pgpl
bmRvYmoKMiAwIG9iago8PCAvVHlwZSAvUGFnZXMgL0NvdW50IDEgL0tpZHMgWyAzIDAgUiBdIC9S
ZXNvdXJjZXMgPDwgL1BhdHRlcm4gPDwgL1B0MSA1IDAgUiA+PiAvUHJvY3NldCBbIC9QREYgL1Rl
eHQgXSA+PiA+PgplbmRvYmoKMyAwIG9iago8PCAvVHlwZSAvUGFnZSAvQ29udGVudHMgNCAwIFIg
L01lZGlhQm94IFsgMCAwIDIzMCAyMTAgXSAvUGFyZW50IDIgMCBSID4+CmVuZG9iago0IDAgb2Jq
Cjw8IC9MZW5ndGggNjE5ID4+CnN0cmVhbQoKcQowIEcKMSAxIDAgcmcKMjUgMTc1IDE3NSAtMTUw
IHJlCmYKL1BhdHRlcm4gY3MKL1B0MSBzY24KOTkuOTIgNDkuOTIgbQo5OS45MiA3Ny41MiA3Ny41
MiA5OS45MiA0OS45MiA5OS45MiBjCjIyLjMyIDk5LjkyIC0wLjA4IDc3LjUyIC0wLjA4IDQ5Ljky
IGMKLTAuMDggMjIuMzIgMjIuMzIgLTAuMDggNDkuOTIgLTAuMDggYwo3Ny41MiAtMC4wOCA5OS45
MiAyMi4zMiA5OS45MiA0OS45MiBjCkIKMjI0Ljk2IDQ5LjkyIG0KMjI0Ljk2IDc3LjUyIDIwMi41
NiA5OS45MiAxNzQuOTYgOTkuOTIgYwoxNDcuMzYgOTkuOTIgMTI0Ljk2IDc3LjUyIDEyNC45NiA0
OS45MiBjCjEyNC45NiAyMi4zMiAxNDcuMzYgLTAuMDggMTc0Ljk2IC0wLjA4IGMKMjAyLjU2IC0w
LjA4IDIyNC45NiAyMi4zMiAyMjQuOTYgNDkuOTIgYwpCCjg3LjU2IDIwMS43IG0KNjMuNjYgMTg3
LjkgNTUuNDYgMTU3LjMyIDY5LjI2IDEzMy40IGMKODMuMDYgMTA5LjUgMTEzLjY2IDEwMS4zIDEz
Ny41NiAxMTUuMSBjCjE2MS40NiAxMjguOSAxNjkuNjYgMTU5LjUgMTU1Ljg2IDE4My40IGMKMTQy
LjA2IDIwNy4zIDExMS40NiAyMTUuNSA4Ny41NiAyMDEuNyBjCkIKNTAgNTAgbQoxNzUgNTAgbAox
MTIuNSAxNTguMjUzIGwKYgpRCmVuZHN0cmVhbQplbmRvYmoKNSAwIG9iago8PCAvVHlwZSAvUGF0
dGVybiAvQkJveCBbIDAgMCAxMDAgMTAwIF0gL01hdHJpeCBbIDAuNCAwIDAgMC40IDAgMCBdIC9Q
YWludFR5cGUgMSAvUGF0dGVyblR5cGUgMSAvUmVzb3VyY2VzIDw8IC9Gb250IDw8IC9GMSA2IDAg
UiA+PiA+PiAvVGlsaW5nVHlwZSAyIC9YU3RlcCAxMDAgL1lTdGVwIDEwMCAvTGVuZ3RoIDE4MyA+
PgpzdHJlYW0KCnEKQlQKL0YxIDEgVGYKNjQgMCAwIDY0IDcuMTc3MSAyLjQ0MTQgVG0KMCBUYwow
IFR3CjEgMCAwIHJnCihcMjUzKSBUagowLjc0NzggLTAuMDA3IFRECjAgMSAwIHJnCihcMjUyKSBU
agotMC43MzIzIDAuNzgxMyBURAowIDAgMSByZwooXDI1MSkgVGoKMC42OTEzIDAuMDA3IFRECjAg
MCAwIHJnCihcMjUwKSBUagpFVApRCmVuZHN0cmVhbQplbmRvYmoKNiAwIG9iago8PCAvVHlwZSAv
Rm9udCAvU3VidHlwZSAvVHlwZTEgL0Jhc2VGb250IC9aYXBmRGluZ2JhdHMgPj4KZW5kb2JqCnhy
ZWYKMCA3CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDAxNCAwMDAwMCBuIAowMDAwMDAwMDYz
IDAwMDAwIG4gCjAwMDAwMDAxODkgMDAwMDAgbiAKMDAwMDAwMDI3OCAwMDAwMCBuIAowMDAwMDAw
OTQ4IDAwMDAwIG4gCjAwMDAwMDEzNTAgMDAwMDAgbiAKdHJhaWxlcgo8PCAvUm9vdCAxIDAgUiAv
U2l6ZSA3ID4+CnN0YXJ0eHJlZgoxNDIzCiUlRU9G"/>

If you save the above as html then open it with a browser you should see the following one-page PDF.

I'd suggest trying a similar process to encoded your PDF as base 64 and embed it as above.

Implementation of a PDF file in your HTML web-page is very easy.

<embed src="file_name.pdf" width="800px" height="2100px" />

Make sure to change the width and height for your needs.

I would recommend creating another action on the controller designed specifically for rendering the PDF data. Then it's just a matter of referencing it within your data attribute:

data="@Url.Action("GetPdf", "PDF")"

I'm not sure you can dump raw PDF data within the DOM without hitting some kind of encoding issue. You may be able to do like images, though I've never tried. But, for demo's sake and image would look like:

src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

So, assuming the same could be done it would probably look like the following:

@{
  String base64EncodedPdf = System.Convert.ToBase64String(Model.pdfInBytes);
}

@* ... *@
<object data="data:application/pdf;base64,@base64EncodedPdf"
        width="900" height="600" type="application/pdf"></object>

I still stand by my original response to create a new action however.

To prevent 'InvalidCharacterError' error, you need to do this:

var base64EncodedStr = btoa(unescape(encodeURIComponent(rawData)));

This is quick, easy, to the point and doesn't require any third-party script:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

UPDATE (2/3/2021)

Adobe now offers its own PDF Embed API.
(That requires registering at Adobe and get clientID to use within js)

https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html

UPDATE (1/2018):

The Chrome browser on Android no longer supports PDF embeds. You can get around this by using the Google Drive PDF viewer

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

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);

I use Google Docs embeddable PDF viewer. The docs don't have to be uploaded to Google Docs, but they do have to be available online.

<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

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