AngularJSを使用してASP.NET Web APIメソッドからファイルをダウンロードする
私のAngular JSプロジェクトでは、<a>アンカータグをクリックしました。クリックすると、ファイルを返すWebAPIメソッドへのHTTP GETリクエストが送信されます。
さて、リクエストが成功したら、ファイルをユーザーにダウンロードします。それ、どうやったら出来るの？
アンカータグ：
<a href="#" ng-click="getthefile()">Download img</a>
AngularJS：
$scope.getthefile = function () {
$http({
method: 'GET',
cache: false,
url: $scope.appPath + 'CourseRegConfirm/getfile',
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
}).success(function (data, status) {
console.log(data); // Displays text data if the file is a text file, binary if it's an image
// What should I write here to download the file I receive from the WebAPI method?
}).error(function (data, status) {
// ...
});
}
私のWebAPIメソッド：
[Authorize]
[Route("getfile")]
public HttpResponseMessage GetTestFile()
{
HttpResponseMessage result = null;
var localFilePath = HttpContext.Current.Server.MapPath("~/timetable.jpg");
if (!File.Exists(localFilePath))
{
result = Request.CreateResponse(HttpStatusCode.Gone);
}
else
{
// Serve the file to the client
result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
result.Content.Headers.ContentDisposition.FileName = "SampleImg";
}
return result;
}
Ajaxを使用したバイナリファイルのダウンロードのサポートは素晴らしいものではありません。非常にまだ 作業中のドラフトとして開発中 です。
簡単なダウンロード方法：
以下のコードを使用するだけで、ブラウザーに要求されたファイルをダウンロードさせることができます。これはすべてのブラウザーでサポートされており、明らかにWebApi要求をまったく同じようにトリガーします。
$scope.downloadFile = function(downloadPath) {
window.open(downloadPath, '_blank', '');
}
Ajaxバイナリダウンロード方法：
一部のブラウザではajaxを使用してバイナリファイルをダウンロードできます。以下は、Chrome、Internet Explorer、FireFox、Safariの最新バージョンで動作する実装です。
arraybuffer応答タイプを使用し、次にblobメソッドに保存するために表示されるJavaScript saveBlobに変換されます-これは現在Internet Explorerにのみ存在します-または、ブラウザで開かれるBLOBデータURLに変換され、MIMEタイプがブラウザでの表示がサポートされている場合にダウンロードダイアログがトリガーされます。
Internet Explorer 11のサポート（修正済み）
注：Internet Explorer 11は、msSaveBlob関数のエイリアスが使用されている場合、セキュリティ機能である可能性がありますが、欠陥がある可能性が高いため、var saveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob ... etc.を使用して使用可能なsaveBlobサポートが例外を引き起こしたかどうかを判断します。そのため、以下のコードはnavigator.msSaveBlobを個別にテストするようになりました。ありがとうMicrosoft
// Based on an implementation here: web.student.tuwien.ac.at/~e0427417/jsdownload.html
$scope.downloadFile = function(httpPath) {
// Use an arraybuffer
$http.get(httpPath, { responseType: 'arraybuffer' })
.success( function(data, status, headers) {
var octetStreamMime = 'application/octet-stream';
var success = false;
// Get the headers
headers = headers();
// Get the filename from the x-filename header or default to "download.bin"
var filename = headers['x-filename'] || 'download.bin';
// Determine the content type from the header or default to "application/octet-stream"
var contentType = headers['content-type'] || octetStreamMime;
try
{
// Try using msSaveBlob if supported
console.log("Trying saveBlob method ...");
var blob = new Blob([data], { type: contentType });
if(navigator.msSaveBlob)
navigator.msSaveBlob(blob, filename);
else {
// Try using other saveBlob implementations, if available
var saveBlob = navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob;
if(saveBlob === undefined) throw "Not supported";
saveBlob(blob, filename);
}
console.log("saveBlob succeeded");
success = true;
} catch(ex)
{
console.log("saveBlob method failed with the following exception:");
console.log(ex);
}
if(!success)
{
// Get the blob url creator
var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
if(urlCreator)
{
// Try to use a download link
var link = document.createElement('a');
if('download' in link)
{
// Try to simulate a click
try
{
// Prepare a blob URL
console.log("Trying download link method with simulated click ...");
var blob = new Blob([data], { type: contentType });
var url = urlCreator.createObjectURL(blob);
link.setAttribute('href', url);
// Set the download attribute (Supported in Chrome 14+ / Firefox 20+)
link.setAttribute("download", filename);
// Simulate clicking the download link
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
console.log("Download link method with simulated click succeeded");
success = true;
} catch(ex) {
console.log("Download link method with simulated click failed with the following exception:");
console.log(ex);
}
}
if(!success)
{
// Fallback to window.location method
try
{
// Prepare a blob URL
// Use application/octet-stream when using window.location to force download
console.log("Trying download link method with window.location ...");
var blob = new Blob([data], { type: octetStreamMime });
var url = urlCreator.createObjectURL(blob);
window.location = url;
console.log("Download link method with window.location succeeded");
success = true;
} catch(ex) {
console.log("Download link method with window.location failed with the following exception:");
console.log(ex);
}
}
}
}
if(!success)
{
// Fallback to window.open method
console.log("No methods worked for saving the arraybuffer, using last resort window.open");
window.open(httpPath, '_blank', '');
}
})
.error(function(data, status) {
console.log("Request failed with status: " + status);
// Optionally write the error out to scope
$scope.errorDetails = "Request failed with status: " + status;
});
};
使用法：
var downloadPath = "/files/instructions.pdf";
$scope.downloadFile(downloadPath);
ノート：
WebApiメソッドを変更して、次のヘッダーを返す必要があります。
x-filenameヘッダーを使用してファイル名を送信しました。これは便宜上のカスタムヘッダーですが、正規表現を使用してcontent-dispositionヘッダーからファイル名を抽出できます。応答にも
content-typemimeヘッダーを設定する必要があります。これにより、ブラウザーはデータ形式を認識します。
これがお役に立てば幸いです。
C＃WebApi PDFダウンロード_すべての作業Angular JS認証
Web Apiコントローラー
[HttpGet]
[Authorize]
[Route("OpenFile/{QRFileId}")]
public HttpResponseMessage OpenFile(int QRFileId)
{
QRFileRepository _repo = new QRFileRepository();
var QRFile = _repo.GetQRFileById(QRFileId);
if (QRFile == null)
return new HttpResponseMessage(HttpStatusCode.BadRequest);
string path = ConfigurationManager.AppSettings["QRFolder"] + + QRFile.QRId + @"\" + QRFile.FileName;
if (!File.Exists(path))
return new HttpResponseMessage(HttpStatusCode.BadRequest);
HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
//response.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
Byte[] bytes = File.ReadAllBytes(path);
//String file = Convert.ToBase64String(bytes);
response.Content = new ByteArrayContent(bytes);
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
response.Content.Headers.ContentDisposition.FileName = QRFile.FileName;
return response;
}
Angular JSサービス
this.getPDF = function (apiUrl) {
var headers = {};
headers.Authorization = 'Bearer ' + sessionStorage.tokenKey;
var deferred = $q.defer();
$http.get(
hostApiUrl + apiUrl,
{
responseType: 'arraybuffer',
headers: headers
})
.success(function (result, status, headers) {
deferred.resolve(result);;
})
.error(function (data, status) {
console.log("Request failed with status: " + status);
});
return deferred.promise;
}
this.getPDF2 = function (apiUrl) {
var promise = $http({
method: 'GET',
url: hostApiUrl + apiUrl,
headers: { 'Authorization': 'Bearer ' + sessionStorage.tokenKey },
responseType: 'arraybuffer'
});
promise.success(function (data) {
return data;
}).error(function (data, status) {
console.log("Request failed with status: " + status);
});
return promise;
}
どちらでも構いません
サービスを呼び出すAngular JS Controller
vm.open3 = function () {
var downloadedData = crudService.getPDF('ClientQRDetails/openfile/29');
downloadedData.then(function (result) {
var file = new Blob([result], { type: 'application/pdf;base64' });
var fileURL = window.URL.createObjectURL(file);
var seconds = new Date().getTime() / 1000;
var fileName = "cert" + parseInt(seconds) + ".pdf";
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = fileURL;
a.download = fileName;
a.click();
});
};
そして最後にHTMLページ
<a class="btn btn-primary" ng-click="vm.open3()">FILE Http with crud service (3 getPDF)</a>
これは、コードを共有するだけでリファクタリングされます。この機能を利用するのにしばらく時間がかかったので、誰かに役立つことを願います。
私にとってはWeb APIはRailsで、クライアントサイドAngularは Restangular と FileSaverで使用されていました。 js
Web API
module Api
module V1
class DownloadsController < BaseController
def show
@download = Download.find(params[:id])
send_data @download.blob_data
end
end
end
end
HTML
<a ng-click="download('foo')">download presentation</a>
角度コントローラ
$scope.download = function(type) {
return Download.get(type);
};
Angular Service
'use strict';
app.service('Download', function Download(Restangular) {
this.get = function(id) {
return Restangular.one('api/v1/downloads', id).withHttpConfig({responseType: 'arraybuffer'}).get().then(function(data){
console.log(data)
var blob = new Blob([data], {
type: "application/pdf"
});
//saveAs provided by FileSaver.js
saveAs(blob, id + '.pdf');
})
}
});
認証を必要とするAPIでも機能するソリューションを開発する必要がありました（この記事のを参照）。
ここではAngularJSを簡単に説明します。
ステップ1：専用ディレクティブを作成する
// jQuery needed, uses Bootstrap classes, adjust the path of templateUrl
app.directive('pdfDownload', function() {
return {
restrict: 'E',
templateUrl: '/path/to/pdfDownload.tpl.html',
scope: true,
link: function(scope, element, attr) {
var anchor = element.children()[0];
// When the download starts, disable the link
scope.$on('download-start', function() {
$(anchor).attr('disabled', 'disabled');
});
// When the download finishes, attach the data to the link. Enable the link and change its appearance.
scope.$on('downloaded', function(event, data) {
$(anchor).attr({
href: 'data:application/pdf;base64,' + data,
download: attr.filename
})
.removeAttr('disabled')
.text('Save')
.removeClass('btn-primary')
.addClass('btn-success');
// Also overwrite the download pdf function to do nothing.
scope.downloadPdf = function() {
};
});
},
controller: ['$scope', '$attrs', '$http', function($scope, $attrs, $http) {
$scope.downloadPdf = function() {
$scope.$emit('download-start');
$http.get($attrs.url).then(function(response) {
$scope.$emit('downloaded', response.data);
});
};
}]
});
ステップ2：テンプレートを作成する
<a href="" class="btn btn-primary" ng-click="downloadPdf()">Download</a>
ステップ3：それを使う
<pdf-download url="/some/path/to/a.pdf" filename="my-awesome-pdf"></pdf-download>
これで青いボタンが表示されます。クリックすると、PDFがダウンロードされ（注意：Base64エンコーディングでPDFを配信する必要があります）、hrefに入れます。ボタンが緑色に変わり、テキストが保存に切り替わります。ユーザーはもう一度クリックすると、ファイルの標準ダウンロードファイルダイアログmy-awesome.pdfが表示されます。
ファイルをbase64文字列として送信してください。
var element = angular.element('<a/>');
element.attr({
href: 'data:attachment/csv;charset=utf-8,' + encodeURI(atob(response.payload)),
target: '_blank',
download: fname
})[0].click();
AttrメソッドがFirefoxで機能しない場合は、javaScriptのsetAttributeメソッドも使用できます。
私はさまざまな解決策を経験してきましたが、これが私にとって非常に有効であることがわかったものです。
私の場合は、いくつかの資格情報を付けて投稿リクエストを送信する必要がありました。小さなオーバーヘッドはスクリプト内にjqueryを追加することでした。しかしそれは価値がありました。
var printPDF = function () {
//prevent double sending
var sendz = {};
sendz.action = "Print";
sendz.url = "api/Print";
jQuery('<form action="' + sendz.url + '" method="POST">' +
'<input type="hidden" name="action" value="Print" />'+
'<input type="hidden" name="userID" value="'+$scope.user.userID+'" />'+
'<input type="hidden" name="ApiKey" value="' + $scope.user.ApiKey+'" />'+
'</form>').appendTo('body').submit().remove();
}
あなたのコンポーネント、すなわち、角度jsコードでは：
function getthefile (){
window.location.href='http://localhost:1036/CourseRegConfirm/getfile';
};
WEBApiから返されたデータのパラメータと、ダウンロードしようとしているファイルのファイル名を受け取るshowfile関数を実装できます。私がしたのは別のブラウザサービスを作成してユーザーのブラウザを識別してからブラウザに基づいてファイルのレンダリングを処理することでした。たとえば、ターゲットブラウザがiPadのクロムである場合は、javascripts FileReaderオブジェクトを使用する必要があります。
FileService.showFile = function (data, fileName) {
var blob = new Blob([data], { type: 'application/pdf' });
if (BrowserService.isIE()) {
window.navigator.msSaveOrOpenBlob(blob, fileName);
}
else if (BrowserService.isChromeIos()) {
loadFileBlobFileReader(window, blob, fileName);
}
else if (BrowserService.isIOS() || BrowserService.isAndroid()) {
var url = URL.createObjectURL(blob);
window.location.href = url;
window.document.title = fileName;
} else {
var url = URL.createObjectURL(blob);
loadReportBrowser(url, window,fileName);
}
}
function loadFileBrowser(url, window, fileName) {
var iframe = window.document.createElement('iframe');
iframe.src = url
iframe.width = '100%';
iframe.height = '100%';
iframe.style.border = 'none';
window.document.title = fileName;
window.document.body.appendChild(iframe)
window.document.body.style.margin = 0;
}
function loadFileBlobFileReader(window, blob,fileName) {
var reader = new FileReader();
reader.onload = function (e) {
var bdata = btoa(reader.result);
var datauri = 'data:application/pdf;base64,' + bdata;
window.location.href = datauri;
window.document.title = fileName;
}
reader.readAsBinaryString(blob);
}