angular-download v0.0.5
angular-download
Service for downloading browser-generated data to disk.
Motivation
This service provides methods for downloading content generated in JavaScript (text, images, etc.) as files.
It relies on the <a download>
functionality supported in current browsers and does not require any server
handling or flash plugins.
Installing the Module
Installation can be done through bower:
bower install angular-download
In your page add:
<script src="bower_components/angular-download/angular-download.js"></script>
You can also use npm to install it:
npm install angular-download --save
Loading the Module
This service is part of the download
module:
var app = angular.module('myApp', [..., 'download']);
Using the download service
Inject the download
service:
function MyController($scope, download, ...) {
$scope.downloadFile = function() {
download.fromData("contents of the file", "text/plain", "file.txt");
}
}
Method: fromData(data, mimeType, fileName)
Downloads a file containing string data
as type mimeType
named fileName
.
function MyController($scope, download) {
$scope.downloadAsJson = function(someData) {
download.fromData(JSON.stringify(someData), "application/json", "download.json");
}
}
Method: fromBase64(dataBase64, mimeType, fileName)
Downloads a file containing Base64-encoded string dataBase64
as type mimeType
named fileName
.
function MyController($scope, download) {
$scope.downloadAsJson = function(someData) {
download.dataBase64(JSON.stringify(btoa(someData)), "application/json", "download.json");
}
}
Method: fromDataURL(dataUrl, fileName)
Downloads a file with contents defined by the dataUrl
named fileName
. This is useful for downloading binary
data, such as client-generated images.
function MyController($scope, download) {
$scope.downloadImage = function(img) {
download.fromDataURL(getImageDataURL(img), "download.png");
}
}
// Create a dataURL from an img element
function getImageDataURL(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
// Copy the image contents to the canvas
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
return canvas.toDataURL("image/png");
}
Method: fromBlob(dataBlob, fileName)
Downloads a Blob
with contents defined by the dataBlob
named fileName
. This is useful for downloading binary
data, such as client-generated images.
function MyController($scope, download) {
$scope.downloadImage = function(img) {
getImageDataBlob(function(blob) {
download.fromBlob(blob, "download.png");
});
}
}
// Create a PNG Blob from an img element
function downloadImage(img, cb) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
// Copy the image contents to the canvas
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
if (canvas.msToBlob) {
// On IE, the msToBlob method returns the Blob value
cb(canvas.msToBlob);
} else {
// On standard browsers, the toBlob method calls the callback
canvas.toBlob(cb);
}
}
Copyright & License
Copyright 2015 Stepan Riha. All Rights Reserved.
This may be redistributed under the MIT licence. For the full license terms, see the LICENSE file which should be alongside this readme.