The Navigator object in Angular 13 does not have the msSaveOrOpenBlob property

After upgrading to Angular 13, I encountered an issue with the property msSaveOrOpenBlob not existing on type Navigator.

It appears that Navigator.msSaveOrOpenBlob is being deprecated according to https://developer.mozilla.org/en-US/docs/Web/API/Navigator/msSaveOrOpenBlob#browser_compatibility

Previously, I had a Angular 12 application and now migrating to Angular 13 with updated TypeScript version. However, I am facing the problem of "The property msSaveOrOpenBlob doesn't exist on type Navigator".

I am looking for an alternative code for the following:

if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveOrOpenBlob(blob, filename);
        }
javascriptangularangularjstypescriptangular13

Answer №1

const dataFromWindow: any = window.navigator;
let csvBlob = new Blob([result.body], { type: "text/csv" });
if (dataFromWindow && dataFromWindow.msSaveOrOpenBlob) {
    dataFromWindow.msSaveOrOpenBlob(csvBlob);
    return;
}

Answer №3

To implement the following code snippet, add it to your main.ts file:

  declare global{
    interface Navigator {
      msSaveOrOpenBlob?: (blob: any, defaultName?: string) => boolean
    }
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Triggering a hover effect by invoking a jQuery function when a href is clicked

Hey there, sorry if I'm a bit confused or misinterpreting things, but I'm still getting the hang of jQuery and javascript. I've created an online shop using PHP, and one essential element is a jQuery cart that needs to be displayed on every ...

javascriptjqueryhover

Tips for cutting out specific sections of a URL displayed in the browser's address bar

I have been attempting to manipulate the URL in the address bar using JavaScript. Although the result is correct when I test it in the console, it doesn't seem to update in the address bar. What could be causing this issue? Is there a different appr ...

javascriptjqueryreplace

Determine whether the current page was reached by pressing the back button

Can we determine if the current page was loaded via a back button press? Here is the scenario: index.html (contains a link to page1 in the menu) page1.html (loads content from ajax with a link to page2) page2.html (user presses the BACK button) page1.h ...

javascriptjqueryhtml

Incorporating the JqueryUI menu into an AngularJS project

We are facing an issue with integrating JqueryUI menus into our AngularJS application. In our Layout.js file, we are attempting the following: OURApp.controller('leftBarCtrl', ['$scope', function ($scope) { $scope.init = function ( ...

javascriptjqueryangularjsjquery-ui

The Jquery ajax page is redirecting automatically when a post request is made

Encountering an issue while attempting to upload multiple files through AJAX, as the process redirects to a blank page displaying only the names of the uploaded files. Here is the HTML tag: Below is the JavaScript function: function upload(){ var proje ...

javascriptjqueryajaxbonita

creating dynamic column headers with JavaScript

I am looking for a way to make the column names dynamic so that I don't have to manually update them every time. Here is my code snippet: jqGrid11.prototype = { display : function() { $('body').append(this.html.join("")); $("#jqGrid").j ...

javascriptjqueryjqgrid

Modifying the selected color of DropDownMenu List items

Hey there! I'm currently trying to modify the color of a material-ui element that is selected, but I'm having trouble finding any resources on how to accomplish this. My goal is to switch this pinkish shade to a more soothing blue hue. https://i ...

javascriptreactjsmaterial-uiformsy-material-ui

I'm encountering an issue where the npm install process is getting stuck while attempting to extract the xxxx package

When running the sudo npm install command on my local machine, everything works fine. However, once I pulled the code into an EC2 Ubuntu machine, the npm install process gets stuck at a certain point. The output shows "sill doParallel extract 1103" and I ...

node.jsubuntuangularamazon-ec2npm

Choose Default Value in Drop-Down List in AngularJS when Page Loads

Within the realm of Angularjs, there exists a DropDown: <select ng-model="category" ng-change="categoryChanged(category)" class="form-control" data-ng-options="category as category.name for category in categories"> <option value="">Se ...

javascriptjqueryhtmlangularjs

PrimeNg style in Angular 2 is not being applied

After following the instructions to install primeng by executing npm install primeng --save and importing necessary modules in the app.module.ts file, such as: import {CheckboxModule} from 'primeng/primeng'; ... imports: [ CheckboxModule ...

angularprimeng

Add some flair to your list by animating the text within it

My goal is to add animation to the text within the list. Below is the code snippet: <div id="about" class="row section"> <div class="col-sm-8"> <h2 style="color:black;">About me!</h2> <ul> <li > ...

javascripthtml

Creating a unique Ajax delete method for a specific id using vanilla JavaScript

How can I translate this Ajax call from jQuery to vanilla JavaScript? What needs to be changed in order to convert it to vanilla JavaScript $.ajax({ type: "DELETE", url: "/users/delete/" + $(".deleteUser").data('id'); }} I attempted to rewri ...

javascriptajax

Experiencing a problem with JQuery Offset when a fixed position is applied to a

My website has a page layout and style similar to the example provided in this JsFiddle. When I use JQuery to click on a button, the content is displayed correctly as shown below: https://i.sstatic.net/V89qa.jpg However, if I scroll down the page first ...

javascriptjqueryhtmlcss

Retrieve the value from an input tag that is only displayed based on a condition using *ngIf

In my HTML form, I have implemented conditional visibility of input fields based on the radio button selection using *ngIf. <table> <tr> <td><label>name</label></td> <td><input #name />&l ...

htmlangular

Having trouble with Angular 6 Validators.pattern() RegEx Function?

I've been attempting to implement a regular expression with the Validators.pattern() for Angular 6 FormBuilder, but for some reason, the validation is not working as expected. I even tested the RegEx on https://codepen.io/devtips/pen/gzqKKP and it was ...

javascriptregexangulartypescriptvalidation

How to update the selected autocomplete item in Vue using programming techniques?

Although I am still learning Vue, consider the following scenario: <v-autocomplete v-model="defaultUser" :hint="`User: ${defaultUser.username}`" :items="users" :item-text="item =>`${item.firstName} - $ ...

javascriptvue.jsvue-componentvuetify.js

What is the reason behind TypeScript mandating the invocation of super() by the inheriting class, even when the parent class does not have

Just starting out with class-based programming, I've been tinkering with a TypeScript API. Here's the scenario: import { Router } from "express"; export default class BaseController { public router = Router(); } and then I create another cl ...

typescriptconstructorsuper

Passing data from a child component to a parent component in Vue using TypeScript can

I have encountered a small issue with Vue emit. While I successfully used it about a year ago, in my current project, I am struggling to make it work. Despite spending several hours trying to find a solution, I am unable to receive the emitted value in the ...

typescriptvue.jsemit

Is there a way to eliminate text from a barcode image using JavaScript or TypeScript?

This is my unique html code <div class="pr-2" style="width: 130px"> <div *ngIf="!element.editing" > <span class="ss">{{element.barcode}}</span> </di ...

javascriptangulartypescriptbarcodebarcode-printing

How can I remove the focus highlight from the MUI DatePicker while retaining it for the TextField?

I am currently working on developing a date picker using react.js with the MUI DatePicker library. The code I have implemented closely resembles what is provided in their documentation. However, upon rendering the component, I am encountering an issue whe ...

javascriptreactjsmaterial-ui