alferov / angular-file-saver

An AngularJS service that provides cross-browser compatibility of HTML5 saveAs() - http://alferov.github.io/angular-file-saver

Angular File Saver

Angular File Saver is an AngularJS service that leverages FileSaver.js and Blob.js to implement the HTML5 W3C saveAs() interface in browsers that do not natively support it

Dependencies

• Angular
• FileSaver.js
• Blob.js

File dist/angular-file-saver.bundle.js contains all required dependencies and grants access to both Blob.js and FileSaver.js polyfills via Blob and SaveAs services.

Installation

# Using bower:
$ bower install angular-file-saver

# Using npm:
$ npm install angular-file-saver

Basic usage

• Include ngFileSaver module into your project;
• Pass both FileSaver and Blob services as dependencies;
• Create a Blob object by passing an array with data as the first argument and an object with set of options as the second one: new Blob(['text'], { type: 'text/plain;charset=utf-8' });
• Invoke FileSaver.saveAs with the following arguments:
  • data Blob: a Blob instance;
  • filename String: a custom filename (an extension is optional);
  • disableAutoBOM Boolean: (optional) Disable automatically provided Unicode text encoding hints;

Demo

API

FileSaver

A core Angular factory.

#saveAs(data, filename[, disableAutoBOM])

Immediately starts saving a file

Parameters

• Blob data: a Blob instance;
• String filename: a custom filename (an extension is optional);
• Boolean disableAutoBOM : (optional) Disable automatically provided Unicode text encoding hints;

Blob(blobParts[, options]))

An Angular factory that returns a Blob instance.

SaveAs(data, filename[, disableAutoBOM])

An Angular factory that returns a FileSaver.js polyfill.

Example

JS

function ExampleCtrl(FileSaver, Blob) {
  var vm = this;

  vm.val = {
    text: 'Hey ho lets go!'
  };

  vm.download = function(text) {
    var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
    FileSaver.saveAs(data, 'text.txt');
  };
}

angular
  .module('fileSaverExample', ['ngFileSaver'])
  .controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);

HTML

<div class="wrapper" ng-controller="ExampleCtrl as vm">
  <textarea
    ng-model="vm.val.text"
    name="textarea" rows="5" cols="20">
      Hey ho let's go!
  </textarea>
  <a href="" class="btn btn-dark btn-small" ng-click="vm.download(vm.val.text)">
    Download
  </a>
</div>

License

MIT © Philipp Alferov

angular-file-saver's Issues

Don't get it working...

Hi,
Can you please help? I am trying to implement the filesaver, but can't get it working. Nothing happens when I click the Download button.
I have the following defined in my index.html :

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular-file-saver/dist/angular-file-saver.js"></script>
<script type="text/javascript" src="js/angular-file-saver/dist/angular-file-saver.bundle.js"></script>
<script type="text/javascript" src="app/app.js"></script>

The textarea in index.html looks as follows:

<div class="wrapper" ng-controller="FileSaveCtrl as vm">
  <textarea
    ng-model="vm.val.text"
    name="textarea" rows="5" cols="20">
      Hey ho let's go!
  </textarea>
  <a href="" class="btn btn-dark btn-small" ng-click="vm.download(vm.val.text)">
    Download
  </a>
</div>

The app.js is as follows:

var app = angular.module('psApp', [
        "ngSanitize",
        "ngFileSaver"
]);

app.controller('FileSaveCtrl', ['$scope', 'FileSaver', 'Blob', function FileSaveCtrl($scope, FileSaver, Blob) {
    $scope.val = {
        text: 'Hey ho lets go!'
    };

    $scope.download = function(text) {
        var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
        FileSaver.saveAs(data, 'text.txt');
    };
}]);

Downloading files does not work properly on iOS

Downloading a file does not work properly on iOS 7.1.2 and iOS 9.1. A new window is opened with blob:// in the address bar. In case of a binary file, a blank page is displayed (while an Open with Excel button is present and does work) but no file preview is generated.

Text files (like CSV) are displayed as-is and are not prompted to download. There is also no "Open with" button available for these file types.

Is there a fix available or do I need to bypass this with a user agent check and use another downloading method on iOS?

Versions:
Angular-file-saver: 1.0.1
iOS versions 9.1 and 7.1.2 face this issue, I assume all versions between also share this issue.

Is there a way to attach a promise to the save as?

Would be nice to add an indicator or something while the data is downloading in the request.

Safari usage requires the User to Specify the blob type as "application/octet-stream"

Was this by design?

I've noticed that the usage of FileSaver.saveAs(blob, filename) where the blob does not specify a type will cause the "force" variable to render as false. This will mean that Safari does not properly handle downloading files.

Just wondering if as a user, we're expected to handle for Safari by detecting the browser and setting the type to match "application/octet-stream". It turns out that you can't set it on the blob variable due to its read only properties.

What was the purpose of the force variable? Shouldn't it always handle properly for Safari?

issue running with PhantomJS?

loading angular-file-saver/dist/angular-file-saver.bundle.js
Seems to crash phantomJS

looking into it

Evaluate integration of Saucelabs in order to test cross-browser compatibility on commit

It would be valuable to integrate with Saucelabs in order to track code coverage on commit.

Given that gulp and karma are used in the project, from a rapid analysis the interesting gupl package to be used is: https://github.com/pkozlowski-opensource/gulp-karma-sauce

I've implemented the exact integration you need here: ghostbar/angular-zxcvbn#15

This way it will be possible to automatically execute all the unit test on the selection of browsers targeted by the library (all) and know proactively where it is not working.

It would be interesting then also to track the code coverage and the code quality with tool like CodeClimate and Coveralls

An example of the output with all integrated is the following: https://github.com/globaleaks/GlobaLeaks

How to integrate with RequireJS?

Angular Factory error when running in IE9 with Angular 1.4.1

The SaveAs factory is erroring in IE9 with the following error:
"[$injector:undef] Provider 'SaveAs' must return a value from $get factory method.

Angular needs an something returned from the factory method.

The SaveAs function checks for browser <=IE9 and returns empty if the browser is unsupported. I changed this to return an "error" object: return {error: "Unsupported"};

This solves the issue and allows the file to load in IE <= 9.

Functions will need to test for IE9 support on their own to avoid erroring in IE

The file format and extension of ABC.xls don't match.

Is there a way to configure Angular File Saver to export an html web page to an excel file, without having to see this error message from excel? (And do it without having to set the user's Excel Trusted Location settings)

The file format and extension of ABC.xls don't match. The file could be corrupted or unsafe. Unless you trust its source, don't open it. Do you want to open it anyway?

I'm currently using Angular File Saver like this:
var blob = new Blob([document.getElementById(tableId).innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
FileSaver.saveAs(blob, fileName + ".xls");

thanks,
Darryl

Doesnt work in iOS Firefox

Hi,

Thank you for this awesome Angular Filesaver plugin. This plugin works in almost all browsers I have tested, including iOS Chrome and Safari. However, iOS Firefox doesn't download the blob file. I get the error:

Firefox cannot open the page because it has an invalid address

Can't include module

I hope I'm missing something blatantly obvious. But I installed 1.1.1 with bower and included ngFileSaver as a dependency in my app. Then, I get this error in Chrome:
Uncaught SyntaxError: Unexpected token ( angular-file-saver.bundle.js:11

And this one in Firefox:
SyntaxError: function statement requires a name angular-file-saver.bundle.js:13:17

I've not encountered this kind of issue when including any other package before so thought I would ask to be sure. And the line numbers are one off from the source because all js files are wrapped in a function() {} as a part of the build process.

Thanks!

demo doesn't work on iOS 9.1 and chrome browser

Hi,

just want to let you know that the current demo doesn't work on Google Chrome on iOS 9.1. Is this a known issue, can I run a test to try out if download is available?

Cheers!

Images getting corrupted on download

When I try to download images using FileSaver.SaveAs it is downloaded but cannot see image .

            var self = this;
            var url = this.getUrl(apiUrl, itemPath);		
            var deferred = $q.defer();
            self.inprocess = true;
            $http.get(url).success(function(data,status,headers) {
				var response = {
					content_type:headers('Content-Type'),
					data:data,
				};

				var data_cnt = new Blob([data], { type:response.content_type });
				FileSaver.saveAs(data_cnt, toFilename,false);
		
                deferred.resolve();
              
            }).error(function(data, code) {
                self.deferredHandler(data, deferred, code, $translate.instant('error_downloading'));
            })['finally'](function() {
                self.inprocess = false;
            });
            return deferred.promise;

Saving data to a file without overwriting file's content?

Is it possible to save the data to the file that already exists and is not empty without loosing it's content?

Regards,
misty

How to set the path for saved files

Hi,
I'm using FileSaver in a standalone angular app. When trying to save the file, a dialog with choosing place to save a file appears.
My question is: is it possible to force saving files always to the same localization without showing this dialog?
Or - could this dialog show already my chosen path (currently it remembers the previously chosen path).

I've tried to save a file with something like "C://misty256//myfile.txt" but when dialog appears I see that it creates a file name from this path: "C--misty256-myfile.txt"

Regards,
misty

save file as pdf or word from string base64 or blob

hello everyone I getting a string base64 from my service REST and I show it as PDF data:application/pdf;base64,...

using the pdfViewr library for angular4

so I need to downlaod this on click event as pdf and user save it as system file

I found some solution as filesaver.js but it not clear if someone please have an idea how to do it thank you

Files Format

Can I save a file with csv format? How?

Authentication failed for 'https://github.com/Teleborder/FileSaver.js.git/'

Hi Team,

We are facing below issue :-
remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
04:04:09,874 [Thread-6] [ERROR] remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.
04:04:09,875 [Thread-6] [ERROR] fatal: Authentication failed for 'https://github.com/Teleborder/FileSaver.js.git/'

Last week we added below url then it work properly but now same above issue we are facing.
we added in bower.json
"angular-file-saver": "https://github.com/elquimeras/angular-file-saver.git#hotfix/update-file-saver-module"

please guide us for this issue as per as possible.

Thanks
Suhas

Dependencies version

FileSaver.js.has newer version 1.1.20160319, but it tracks as up to date.

Missing Bower Dependency

We are seeing a legacy angular build of ours fail due to what appears to be the disappearance of file-saver.js#~1.20150507.2 . The repository it comes from https://github.com/Teleborder/FileSaver.js.git/ is no longer listed on github.

Downloaded file is corrupted

Hi,
I have a scenario, where we need to support to download any kind of file types.
By using angular-file-saver I was able to achieve this, but the downloaded file is always corrupted.
am using 'data:octet/stream;base64'.

Here is my code:

var data = new this.blob([this.studentDocument.documentImage], { type: 'octet/stream;base64' });

this.fileSaver.saveAs(data, this.studentDocument.originalFileName);

The same is working if we use href's "download" attribute like below.

But as IE & Edge browsers do not support this "download" attribute, I cannot use this.

$(invisibleLink)
.attr("href", "data:octet/stream;base64," + this.studentDocument.documentImage)
.attr("download", this.studentDocument.originalFileName);
document.body.appendChild(invisibleLink);

invisibleLink.click();

Has anybody has faced this issue?

Thanks
Nirmal

Export angular-file-saver as CommonJS-module

It would be great if we could include angular-file-saver with the CommonJS modularization-syntax. Using your great piece of code, especially in combination with NPM, browserify and AngularJS, would be much simpler.

As an example, have a look at my angular app.js file:

var app = angular.module('myProject', [
    'cgBusy',
    'ngFileSaver',
    'ngmap',
    require('angular-ui-router'),
    require('angular-animate'),
    require('angular-resource'),
    require('angular-ui-bootstrap'),
    require('ng-file-upload'),
    require('angular-smart-table'),
    require('angular-cookies'),
    require('angular-translate'),
    require('angular-dynamic-locale')

Most of my 3rd party dependencies (except of the first three) are referenced with the CommonJS require - keyword. With browserify, all I need to do is to execute browserify app.js > bundle.js and all dependencies (and even more important the transitive dependencies) are loaded from NPM in the specified version and bundled to one file. No need to add the files to my index.html manually or with additional tools like Grunt/Gulp. All we need to do is the standard angular initialization.

AFAIK, it is quite easy to implement it. Add an index.js- file with the following content to your repo (example is the angular-animate dependency):

require('./angular-animate');
module.exports = 'ngAnimate';

It is also an investment into the future, as the module-concept will be an important part of ECMAScript 6.

Let me know if I can help u!

Change the Format of Encoding/File

Hey,
How can I change the Encoding Format of the File I create with this package?

  data = new Blob([str], {
              type: 'application/json;charset=ansi;'
            });
            // Export "Download"
            this.FileSaver.saveAs(data, this.$scope.selectedLang[i].code + '.php');

Changing the charset to ansi instead of utf8 did nothing on the File, it is still UTF8.
Even removing the whole option is not changing anything at all or Errors.

var data = new Blob([angular.toJson(res, true)]);//no option
            // Export "Download"
            this.FileSaver.saveAs(data, 'texte_' + this.$scope.selectedLang[i].pp_id + '.json');

I want to create 3 Files (.json->utf8/.php->ansi/.properties->ansi)
Where can I tell Filesave in which Encoding Format it should be saved?

Doesn't works in Safari browsers

Have tested the library in all Browsers successfully except Safari. It just doesn;t works in Safari and instead opens the file directly in browser. I have to download Zip content. Is there a way to download a file from JavaScript Blob in Safari Browsers

Update to latest version of FileSaver.js

Update FileSaver.js to the latest version (currently 1.1.20160520).

[Feature Request] Broadcast saveAs() result

I'd like to see some form of broadcast, or perhaps callback firing depending on FileSaver.saveAs completion.

i.e.

// with callback support.
function resultFN(e) {
  console.log('File Saved!');
  return e;
}

var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
FileSaver.saveAs(data, 'text.txt', resultFN);

// or on broadcast
$rootScope.$on('FileSaverSuccess', function (e, opts) {
   console.log('File Saved!');
   return e;
});

// or on promise resolution
var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
FileSaver.saveAs(data, 'text.txt').then(function (result) {
  console.log('File Saved!');
  return result;
});

new Blob not working in Safari.

I have used new Blob to save file in angular.
var textData='test';
var data = new Blob([textData], { type: 'application/xhtml+xml;charset=utf-8' });.

I get below error.

[object BlobConstructor]' is not a constructor (evaluating 'new Blob([creativeHtml], { type: 'application/xhtml+xml;charset=utf-8' })')

Can i exclude some rows?

Hi,
Nice one. I am using this. I need to exclude one table row. Is there any option for this?

Not saving files properly with .xls extension

I have a HTML table that will be exported to a Excel file, that you will be automatically downloaded to the user's PC.

I load in the Blob the HTML data and in the type I set the Excel. But when I try to open the file after the download, it loads the Excel but with no Spreadsheet, although the file increases or decrease its size according to the amount of data saved.

Also, when I set to save with an .txt extension it inserts all the data in the .txt file. Any idea of what it could be?

The HTML code:

<div class="col-sm-12" id="exportable">
                <table hidden class="table table-hover table-bordered">
                    <thead>
                    <tr>
                        <th class="col-md-1">#</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Email</th>
                        <th>Recruiter</th>
                        <th>Application Date</th>
                        <th>Opportunity Reference</th>
                        <th>Invoicing Status</th>
                        <th>Citizenship Country</th>
                        <th>Hired?</th>
                        <th>Expertises</th>
                        <th>Universities</th>
                        <th>Source</th>
                        <th>Skills</th>
                        <th>Pipeline Status</th>
                        <th>Dead End Reason</th>
                        <th>Depois Not Paid Reason</th>
                        <th>Desired Starting Date</th>
                        <th>Duration</th>
                        <th>Coaching Program?</th>
                        <th>Regions</th>
                        <th>Interview Schedule Email Sent?</th>
                        <th>Interview Schedule Email Answered?</th>
                        <th>Interview Date</th>
                        <th>English Level</th>
                        <th>Spanish Level</th>
                        <th>Portuguese Level</th>
                        <th>French Level</th>
                        <th>German Level</th>
                        <th>Dutch Level</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="candidate in candidates">
                        <td class="col-md-1"><p>{{candidate.id}}</p></td>
                        <td><p>{{candidate.name}}</p></td>
                        <td><p>{{candidate.pipeline_status | ucWords}}</p></td>
                        <td><p>{{candidate.email}}</p></td>
                        <td><p>{{candidate.recruiter.full_name}}</p></td>
                        <td><p>{{candidate.application_date}}</p></td>
                        <td><p>{{candidate.opportunity_reference}}</p></td>
                        <td><p>{{candidate.invoicing_status}}</p></td>
                        <td><p>{{candidate.citizenship_country.name}}</p></td>
                        <td><p>{{candidate.hired}}</p></td>
                        <td><p><a ng-repeat="expert in candidate.expertise">{{expert.name}};</a> </p></td>
                        <td><p><a ng-repeat="university in candidate.universities">{{university.name}}; </a></p></td>
                        <td><p>{{candidate.source}}</p></td>
                        <td><p><a ng-repeat="skill in candidate.skills">{{skill.name}}; </a></p></td>
                        <td><p>{{candidate.pipeline_status}}</p></td>
                        <td><p>{{candidate.dead_end_reason}}</p></td>
                        <td><p>{{candidate.deposit_not_paid_reason}}</p></td>
                        <td><p>{{candidate.intention.starting_date}}</p></td>
                        <td><p>{{candidate.intention.min_duration}} to {{candidate.intention.max_duration}}</p></td>
                        <td><p>{{candidate.intention.coaching_program}}</p></td>
                        <td><p><a ng-repeat="region in candidate.intention.regions">{{region.name}}; </a></p></td>
                        <td><p>{{candidate.interview_followup.scheduling_email_sent}}</p></td>
                        <td><p>{{candidate.interview_followup.interview_email_answered}}</p></td>
                        <td><p>{{candidate.interview_followup.interview_date}}</p></td>
                        <td><p>{{candidate.language_level.english}}</p></td>
                        <td><p>{{candidate.language_level.spanish}}</p></td>
                        <td><p>{{candidate.language_level.portuguese}}</p></td>
                        <td><p>{{candidate.language_level.french}}</p></td>
                        <td><p>{{candidate.language_level.german}}</p></td>
                        <td><p>{{candidate.language_level.dutch}}</p></td>
                    </tr>
                    </tbody>
                </table>
            </div>

JS Controller:

postExtract: function postExtract() {
                    var today = new Date();
                    var dd = today.getDate();
                    var mm = today.getMonth() + 1; //January is 0!
                    var yyyy = today.getFullYear();

                    if (dd < 10) {
                        dd = '0' + dd;
                    }

                    if (mm < 10) {
                        mm = '0' + mm;
                    }

                    today = yyyy + '-' + mm;

                    var table = document.getElementById('exportable').innerHTML, data = new Blob(
                      [table],
                        {type: 'application/vnd.ms-excel;charset=utf-8'});
                    FileSaver.saveAs(
                        data, 'Candidates Extract ' + today + '.xlsx', false);
                }

SaveAs.saveFile() is undefined

Need to use SaveAs.download().

angular-file-saver browserify

Hi,

I've been trying to import angular-file-saver via browserify but when I import \dist\angular-file-saver.js, I get the following error during the browserify task on grunt:

Error: Cannot find module './angular-file-saver.service' from 'C:\blah\bower_components\angular-file-saver\dist'

I have also tried to use /src/angular-file-saver.module.js instead which passes the related grunt task but then when running the app I get this error:

Error: saveAs is not supported. Please include saveAs polyfill

I have followed the docs (it's quite simple anyway) to the letter, but no luck.

Any thoughts?

Thanks in advance!

How to save a pdf blob content

How to save a pdf blob content. I am using type: application/pdf, but wrong format gets downloaded. The blob works well with older approaches like : window.URL.createObjectURL(blob) or window.navigator.msSaveOrOpenBlob(blob, fileName)

Download multiple files with a loop on Chrome 65

Since Chrome 65
download several files with a loop launch only one download.

For instance :

                        angular.forEach(items, function (item) {
                                FileSaver.saveAs(item.data, item.name);
                        });

A workaround is to add a delay between each save :

                        var promise = $timeout();
                        angular.forEach(items, function (item) {
                            promise = promise.then(function () {
                                FileSaver.saveAs(item.data, item.name);
                                return $timeout(500);
                            });
                        });

Failed to load resource: Frame load interrupted Safari

On Safari doesn't work.
How I can implement this on Safari.
var blob= new Blob([xmlDoc],{type:'application/octet-stream'});
saveAs(blob,fileName);

Should not include columns that have ng-show="false"

Hi. This is so nice and I've tried it and it's so blazing fast. But I'm wondering if you could not include columns that has not been shown by angular? This would be very good for dynamic tables. Thanks.

Downloading a zip file containing multiple csv files

How to download a zip file containing multiple csv files? I used http get function for this.

how can i save to a different location?

Unable to import the angular-file-saver

Hi Philipp,

I tried to include your library on my Angular app (note: I'm using Webpack):

import angularFileSaver from '../../node_modules/angular-file-saver/dist/angular-file-saver';

I was receiving this warning message on the Chrome Dev console:

./~/angular-file-saver/dist/angular-file-saver.js
Critical dependencies:
1:113-120 This seems to be a pre-built javascript file. Though this is possible, it is not recommended. Try to require the original source to get better results.
 @ ./~/angular-file-saver/dist/angular-file-saver.js 1:113-120

And, this following error message:

Error: saveAs is not supported. Please include saveAs polyfill
    at Object.FileSaverUtils.handleErrors (webpack:///./~/angular-file-saver/dist/angular-file-saver.js?:96:13)
    at Object.SaveAs (webpack:///./~/angular-file-saver/dist/angular-file-saver.js?:84:20)
    at Object.invoke (webpack:///./~/angular/angular.js?:4478:17)
    at Object.enforcedReturnValue [as $get] (webpack:///./~/angular/angular.js?:4330:37)
    at Object.invoke (webpack:///./~/angular/angular.js?:4478:17)
    at eval (webpack:///./~/angular/angular.js?:4295:37)
    at getService (webpack:///./~/angular/angular.js?:4437:39)
    at Object.invoke (webpack:///./~/angular/angular.js?:4469:13)
    at Object.enforcedReturnValue [as $get] (webpack:///./~/angular/angular.js?:4330:37)
    at Object.invoke (webpack:///./~/angular/angular.js?:4478:17) <div ui-view="nested" class="ng-scope">

Initially, I thought I need to explicitly include these 2 dependency libs:
import blob from '../../node_modules/angular-file-saver/node_modules//Blob.js/Blob';
import fileSaver from '../../node_modules/angular-file-saver/node_modules/FileSaver.js/FileSaver.min';

But, the above messages still appeared.

Any advice ?

-Ferdinand Arman

[BUG] Not working with AVIRA antivirus

With avira antivirus (not avira internet protection) enabled, FileSaver not save file... after disabled all works fine.

tested with last firefox,chrome,IE,edge

Any ideas?

Save streamed data body from $http.get request

Hi,
I'm trying to save a file served by google app engine blobstore api. It's streamed as the data body from a http GET response.
Any chance that this could be implemented?
Thanks for consideration!

blob.js and filesaver.js from NPM

Can you update your package.json and get blob.js and filesaver.js from NPM?