What is the best way to name a file blob for download when using Angularjs/Restangular?

It's strange, but this task seems to be more straightforward in Internet Explorer than in Chrome or Firefox:

$scope.download = function() {
    Restangular.one(myAPI)
      .withHttpConfig({responseType: 'blob'}).customGET().then(function(response) {

        //When using IE10, a save/open dialog appears with the file name filename.zip
        window.navigator.msSaveOrOpenBlob(response, 'filename.zip');

        //Chrome and Firefox download a file with a random name                
        var url = (window.URL || window.webkitURL).createObjectURL(response);
        window.location.href = url;
    });
};

Is there a way to replicate the behavior of IE10+ in other browsers? Specifically, is it possible to specify a file name and type (which will always be zip)?

javascriptangularjsrestangular

Answer №1

Once you obtain the object URL, you can create an anchor, set the download attribute to specify the desired filename, assign the object URL to the href attribute, and trigger a click event.

var myBlob = new Blob(["example"],{type:'text/html'})
var blobURL = (window.URL || window.webkitURL).createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.download = "myfile.txt";
anchor.href = blobURL;
anchor.click();

Compatibility with download attribute

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

Retrieving values from a multidimensional array in JavaScript

I need some help with my code. I am struggling to pass an array (larray3) containing elements from two other arrays (larray1 and larray2) from data.js to model.js and view.js. Despite correctly building the multidimensional array in data.js, when I receive ...

javascriptsqlarraysnode.jselectron

Establishing a Geolocation Object in HTML5

My HTML5 app relies on Geolocation. In cases where the user denies permission for geolocation, I want to pass a default position object (latitude:0, longitude:0) to ensure the app can still function. I understand how to detect permission denial, but I&apo ...

javascriptangularjsgeolocation

Encountering an 'unresolved variable' error related to a variable utilized in the preceding line (PHPStorm 2018.2.5)

I'm facing a challenge in my IDE while working on a simple code. I'm currently using Angular 1.4 and ES 5.1. function myFunction() { var vm = this; vm.listResults = null; SomeService.someFunction() .then(function (result) { ...

javascriptangularjsintellij-ideaideecmascript-5

The functionality for PHP photo upload preview is currently not compatible with images taken with a mobile camera

In my responsive web app, users can upload photos. Everything works perfectly on desktop, but on mobile devices, there's a peculiar issue. When attempting to upload a photo by using the camera option, the preview doesn't show up unless an alert i ...

javascriptphpfile-upload

What methods are most effective for evaluating the properties you send to offspring elements?

Currently, I'm in the process of testing a component using Vue test utils and Jest. I'm curious about the most effective method to verify that the correct values are being passed to child components through their props. Specifically, I want to e ...

javascriptvue.jstestingjestjs

What is the best way to remove a particular element from an array stored in Local Storage?

Currently working on a web application that features a grade calculator allowing users to add and delete grades, all saved in local storage. However, encountering an issue where attempting to delete a specific grade ends up removing the most recently add ...

javascriptarraysvue.js

Storing JavaScript variables in a database: A step-by-step guide

For the past few days, I've been working with CakePHP and trying to save a javascript variable into a MySQL database using AJAX (jQuery). Here's the code I've been using: <!-- document javascripts --> <script type="text/javas ...

javascriptajaxjquerycakephp-2.0

Sorting arrays with nested objects in JavaScript

I am facing a challenge with sorting an array of objects in two specific ways: First, I need to sort the objects by alphabetical order using the country name. Then, inside each country, I have to arrange the scores in ascending order. Below you can find ...

javascriptarrayssortingjavascript-objects

Utilizing Flask to gather information from a leaflet map

I am currently working on creating a webpage using Flask. The webpage features a leaflet map where users can click to create a marker that opens a popup window with a link. The link's purpose is to open a new page displaying the longitude and latitude ...

javascripthtmlflask

Is the "json_encode" function dropping the '+' character when using "json.parse"?

Seeking Assistance I have a question regarding the functionality of php function json_encode and js JSON.parse. I seem to be encountering an issue where the '+' character is being dropped somewhere in the process, particularly when dealing with ...

phpjavascriptjson

Transform a string into an object containing duplicate keys by converting them into an array

I need to convert a string into an object, but the string contains duplicated items. JSON Objects cannot have two items with the same key, so the second item is replacing the first one. How can I merge the duplicates and push them to an array? var string = ...

javascripthtmljqueryjsonobject

Using the power of node.js to iterate through a loop of queries and execute

While I am running a for loop, within the loop itself I am executing a PostgreSQL query and storing the result in an array. However, I am unable to determine the order of execution. Here is my code: var array =[]; for(var i = 0 ; i< latitude.le ...

javascriptnode.js

Attempting to Send an Ajax Request and Utilize the Result within a React Component

I am having issues with my tweet box component. I have a submit function that triggers the getAllTweets function when called. The problem is that I am unable to capture the value of the field and pass it on to the getAllTweets function in order to create ...

javascriptajaxnode.jsreactjs

The Right-Click Functionality in SlickGrid

Incorporating SlickGrid into my web application, I am currently contemplating whether to display the context menu based on the specific data row that is right-clicked. However, I am experiencing difficulty in triggering a right-click event as opposed to ...

javascriptonclickcontextmenuslickgrid

Using regex to substitute newline characters

I'm interested in enhancing a regex in JavaScript that detects new lines or line breaks and converts them to carriage returns. - Yep, Photoshop's text feature is a bit outdated. "hello\nworld" "hello world" All of the above examples shou ...

javascriptregexcarriage-return

Mastering the art of navigating through intricate nested properties within JSON data structures

Presented below is a dynamic JSON structure: data = { "name": "deltha", "type": "object", "important": [ "name", "id", "number" ], "information": { "place": { "editable": false, "visible": true }, "info": { ...

javascriptangular

Organization of a Project using Silex and Angular JS 2

After successfully creating a small app using Angular 2 and REST APIs, I am now interested in incorporating both the backend and frontend into a single project. I am currently exploring Silex as a potential solution to build an application with Angular 2 ...

phpangularjssilex

Copying an object from one to another using Angular JS within a loop

Attempting to transfer a portion of a json object into another json object (acting as a filter), inside a for loop and under a conditional statement, proves unsuccessful. The following method works when creating an array: $scope.candidats=[]; for (i=0;i& ...

javascriptarraysangularjsloopsobject

There was an issue with the parsing of the module in ansi-html 1:0 due to an unexpected character "#" at the beginning of the line

I've been delving into learning angular js. Whenever I try to run ng serve --open, I encounter the following error: ERROR in ./ansi-html 1:0 Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle th ...

angularjsnpm

Discontinue playing videos embedded in iframes on Dailymotion

I'm currently working on creating a slider that includes videos from multiple providers, and I need to ensure that the videos stop when changing slides. So far, I've successfully implemented this feature for Vimeo and YouTube without making any a ...

javascriptiframedailymotion-api