How can I prevent IE10/IE11 from displaying the open or save prompt?

Question

How can I prevent IE10/IE11 from displaying the open or save prompt?

Currently, I am utilizing JavaScript blob to download files from the server as shown below:

let blob = new Blob([resposne['_body']], { type: contentType });
if (navigator.msSaveBlob) {
    navigator.msSaveOrOpenBlob(blob, fileName); // applicable for IE
} else {
    let objectUrl = window.URL.createObjectURL(blob);
    window.open(objectUrl);
}

Although the code functions properly, Internet Explorer displays a dialog:

https://i.sstatic.net/carV0.png

Furthermore, if a direct PDF link is placed inside the href tag, it works without any issues. This indicates that there may not be an issue with the Adobe plugin.

The ultimate goal is to have the file open directly without displaying the prompt. I attempted to use a Registry hack recommended here, but it did not produce the desired outcome. Any suggestions on how to achieve this?

javascript angularjs typescript blob internet-explorer-11

Answer 1

Answer №1

If you're struggling with a similar issue, I managed to resolve it by utilizing the window.open function. Instead of downloading the response, I directly provide the URL to window.open in this manner:

window.open(apiUrl) // Example "host:api/documents/download?id=1"

Keep in mind that the API should return the stream response with the header type set. In my scenario, the C# web API method looked like this:

public HttpResponseMessage Download(int id)
{
   var data = _service.Download(id);
   HttpResponseMessage result = null;
   result = Request.CreateResponse(HttpStatusCode.OK);
   result.Content = new ByteArrayContent(data); // where data is a byte[]
   var name = data.Name.ToLower().Contains(data.DocType.ToLower())
            ? data.Name
            : $"{data.Name}{data.DocType}";
   result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("inline")
   {
            FileName = name
   };
   result.Content.Headers.ContentType = new MediaTypeHeaderValue(MimeMapping.GetMimeMapping(name));
   // Here, I am setting up the headers content type, for example, 'text/application-json'
   return result;
}

Hopefully, this solution will be beneficial to someone facing a similar challenge.

Answer 2

If you're struggling with a similar issue, I managed to resolve it by utilizing the window.open function. Instead of downloading the response, I directly provide the URL to window.open in this manner:

window.open(apiUrl) // Example "host:api/documents/download?id=1"

Keep in mind that the API should return the stream response with the header type set. In my scenario, the C# web API method looked like this:

public HttpResponseMessage Download(int id)
{
   var data = _service.Download(id);
   HttpResponseMessage result = null;
   result = Request.CreateResponse(HttpStatusCode.OK);
   result.Content = new ByteArrayContent(data); // where data is a byte[]
   var name = data.Name.ToLower().Contains(data.DocType.ToLower())
            ? data.Name
            : $"{data.Name}{data.DocType}";
   result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("inline")
   {
            FileName = name
   };
   result.Content.Headers.ContentType = new MediaTypeHeaderValue(MimeMapping.GetMimeMapping(name));
   // Here, I am setting up the headers content type, for example, 'text/application-json'
   return result;
}

Hopefully, this solution will be beneficial to someone facing a similar challenge.

How can I prevent IE10/IE11 from displaying the open or save prompt?

Answer №1

Similar questions

Ensure that you wait for all asynchronous $http requests to finish in AngularJS before continuing

How can you connect templates to actions and models in AngularJS directives?

What is the most effective method for declaring callbacks on objects in Typescript?

The UI-date timepicker in Angular JS does not allow the timepicker box to be closed by clicking on the input

Modify the appearance of certain text within an input field

Whenever I attempt to implement NavigationContainer in react native, an error always pops up

Incorporate a CSS-styled Hyperlink Button into a Jquery Loopedslider

The angular framework is unable to assign a value to the property 'xxxx' because it is currently undefined

How to Use PHP to Submit Form Information

Having trouble loading a CSV file into a static folder using Node.js and Express

The website is having trouble reading the local json file accurately

Error: The "checkAvailability" method is not available in the model object

Receiving a 200 ok status, but encountering a response error in Postman

Typescript PDFjs encountering loading issues with corrupt files

Unveiling the magic behind using jasmine to spy on a generic

What is the best way to access a particular property of an object?

What is the most effective method for configuring an npm module?

When an Angular service is created, its properties are not immediately configured

Retrieving data arrays from response.json

Identifying IPV6 Private and Loopback Addresses in Node.js: A Guide