How to show PDF in a new tab of IE without downloading it

Question

Seems IE won't allow to open blobs directly. You have to use msSaveOrOpenBlob. But is there any way to convert it somehowe then. I do need to show PDF into a new tab of IE without downloading it or at least user should not interact and don't see it's being downloaded into e.g. system temp folder. Safai opens it in same window instead of a new tab but main problem is IE. The main idea to make all browsers work similar and open it in new tab for preview.

let blob = new Blob([response], {
    type: 'application/pdf'
});

if (window.navigator && window.navigator.msSaveOrOpenBlob) {//IE
    window.navigator.msSaveOrOpenBlob(response, "TheDocumentToShow.pdf");
} else {
    var fileURL = URL.createObjectURL(response);
    if (navigator.userAgent.indexOf("Chrome") != -1 || navigator.userAgent.indexOf("Firefox") != -1){
        let win = window.open(fileURL, '_blank');                        
    } else { //Safari & Opera iOS
        window.location.href = fileURL;
    }
}

Robin Dijkhof · Accepted Answer · 2018-03-26T07:50:08.377

7

you could use this library: https://github.com/VadimDez/ng2-pdf-viewer. It is build on pdfjs and can integrate a pdf into your own page. You can create a route which takes a link as paramater and open that in a new tab.

edited Mar 26 '18 at 07:50

answered Mar 20 '18 at 09:18

Robin Dijkhof

18,665
11
65
116

it's not really useful.. I need to open the blob object in same browser but another tab or even same window without prompting user to download it – John Glabb Mar 22 '18 at 21:04
1

That is exactly what you can do with it. – Robin Dijkhof Mar 22 '18 at 21:28
2

Try this angular package(https://www.npmjs.com/package/ng2-pdfjs-viewer). Set `[externalWindow]="true"`. Thats it. Eg. `` – James Jun 04 '19 at 15:41

score 1 · Answer 2 · answered Mar 20 '18 at 09:26

1

This simple a link works on IE11, Edge and Chrome:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <a href="file.pdf" target="_blank">Click</a>
</body>
</html>

It opens the pdf in a new tab without downloading it.

answered Mar 20 '18 at 09:26

Dhruv Murarka

376
5
12

I really need to do it through my script and deal with blob object – John Glabb Mar 22 '18 at 21:03
And where is file.pdf do you mean? – SomeRandomName Jun 05 '18 at 13:48

score 1 · Answer 3 · answered Mar 23 '18 at 14:54

1

try pdfjs https://mozilla.github.io/pdf.js/

Set up Viewer.php where you pass the link of the pdf file to show, and simply open it in a new tab, e.g example.com/viewer.php?pdfLink=/files/path/to/doc.pdf

answered Mar 23 '18 at 14:54

MakeLoveNotWar

956
9
25

score 1 · Answer 4 · answered Mar 25 '18 at 07:35

<script>
function pdf() {
window.open("filename.pdf","_blank");
}
</script>
<div onclick="pdf();">Click here</div>

Is this what you want? This doesn't uses anchor tag and is supported in all browsers. Click here for more information.

score 1 · Answer 5 · answered Jun 04 '19 at 15:40

You may try this angular package(https://www.npmjs.com/package/ng2-pdfjs-viewer). It has an easy option to open pdf in a new tab. Use the attribute [externalWindow]="true".

Code
<ng2-pdfjs-viewer [externalWindow]="true" pdfSrc="samplepdf.pdf"></ng2-pdfjs-viewer>

score 0 · Answer 6 · answered Mar 26 '18 at 12:19

I have done it in all browsers using backend code. All you need to do is open a new web page in new tab from front end. let's say - www.example.com/path/to/pdf_file.

In the backend code for this get request, you need to read the pdf file and put the content in response body.

Set the Content-disposition header to inline;filename=<your pdf filename> This will ensure the response content should not be downloaded.

I would have shared the backend code to it, if I knew what backend you are using.

How to show PDF in a new tab of IE without downloading it

6 Answers6

Linked