53

私は AngularJS を使用しており、添付ファイル付きの HttpResponseMessage を返す MVC 4 API を持っています。

var result = new MemoryStream(pdfStream, 0, pdfStream.Length) {
     Position = 0
};
var response = new HttpResponseMessage {
     StatusCode = HttpStatusCode.OK,
     Content = new StreamContent(result)
};
response.Content.Headers.ContentDisposition = 
           new ContentDispositionHeaderValue("attachment") {
                    FileName = "MyPdf.pdf"
           };
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
return response;

私はfileDownloadと呼ばれるjQueryプラグインを使用しています...ファイルを美しくダウンロードします...しかし、「Angular」の方法でこれを行う方法を見つけていません...どんな助けも感謝します。

// _e

4

10 に答える 10

71

私も同じ問題を抱えていました。FileSaverという JavaScript ライブラリを使用して解決しました

電話するだけ

saveAs(file, 'filename');

完全な http ポスト リクエスト:

$http.post('apiUrl', myObject, { responseType: 'arraybuffer' })
  .success(function(data) {
            var file = new Blob([data], { type: 'application/pdf' });
            saveAs(file, 'filename.pdf');
        });
于 2014-05-15T16:22:35.113 に答える
56

ここには、すべてのクライアントが実行する必要がある API への angularjs http 要求があります。WS url と params (ある場合) をケースに合わせてください。それは直江の答えとこれの混合です：

$http({
    url: '/path/to/your/API',
    method: 'POST',
    params: {},
    headers: {
        'Content-type': 'application/pdf',
    },
    responseType: 'arraybuffer'
}).success(function (data, status, headers, config) {
    // TODO when WS success
    var file = new Blob([data], {
        type: 'application/csv'
    });
    //trick to download store a file having its URL
    var fileURL = URL.createObjectURL(file);
    var a = document.createElement('a');
    a.href = fileURL;
    a.target = '_blank';
    a.download = 'yourfilename.pdf';
    document.body.appendChild(a); //create the link "a"
    a.click(); //click the link "a"
    document.body.removeChild(a); //remove the link "a"
}).error(function (data, status, headers, config) {
    //TODO when WS error
});

コードの説明:

  1. Angularjs は、次の URL で file.pdf をリクエストします/path/to/your/API。
  2. 応答で成功を受け取ります
  3. フロントエンドで JavaScript を使用してトリックを実行します。
    • HTML リンク ta: を作成します<a>。
    • JS関数<a>を使用して、ハイパーリンク タグをクリックします。click()
  4. <a>クリック後に html タグを削除します。
于 2014-12-12T11:41:47.333 に答える
10

さまざまな投稿ごとに... XHR経由でダウンロードをトリガーすることはできません。ダウンロードの条件を実装する必要があったため、私の解決策は次のとおりです。

//make the call to the api with the ID to validate
someResource.get( { id: someId }, function(data) {
     //confirm that the ID is validated
     if (data.isIdConfirmed) {
         //get the token from the validation and issue another call
         //to trigger the download
         window.open('someapi/print/:someId?token='+ data.token);
     }
});

どういうわけか、またはいつの日か、XHR を使用してダウンロードをトリガーして、2 番目の呼び出しを回避できることを願っています。// _e

于 2013-01-15T14:56:21.613 に答える
8

angularjsでそれを行うには2つの方法があります..

1) サービスコールに直接リダイレクトする..

<a href="some/path/to/the/file">clickme</a>

2) 非表示のフォームを送信する。

$scope.saveAsPDF = function() {
    var form = document.createElement("form");
    form.setAttribute("action", "some/path/to/the/file");
    form.setAttribute("method", "get");
    form.setAttribute("target", "_blank");

    var hiddenEle1 = document.createElement("input");
    hiddenEle1.setAttribute("type", "hidden");
    hiddenEle1.setAttribute("name", "some");
    hiddenEle1.setAttribute("value", value);

    form.append(hiddenEle1 );

    form.submit();

}

いくつかの要素を投稿する必要がある場合は、非表示の要素を使用します

<button ng-click="saveAsPDF()">Save As PDF</button>
于 2014-11-10T09:54:11.380 に答える
3

tremendows による解決策は私にとってはうまくいきました。ただし、ファイルは Internet Explorer 10 以降でも保存されませんでした。以下のコードは、IEブラウザで機能しました。

var file = new Blob(([data]), { type: 'application/pdf' });
if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(file, 'fileName.pdf');
}
于 2015-11-20T03:48:44.773 に答える
3

Blob()コードを使用した別の例:

function save(url, params, fileName){
    $http.get(url, {params: params}).success(function(exporter) {
        var blob = new Blob([exporter], {type: "text/plain;charset=utf-8;"});
        saveAs(blob, fileName);
    }).error(function(err) {
        console.log('err', err);
    });
};

// Save as Code
function saveAs(blob, fileName){
    var url = window.URL.createObjectURL(blob);

    var doc = document.createElement("a");
    doc.href = url;
    doc.download = fileName;
    doc.click();
    window.URL.revokeObjectURL(url);
}
于 2016-06-01T21:49:04.150 に答える
0 
string trackPathTemp = track.trackPath;

            //The File Path
            var videoFilePath = HttpContext.Current.Server.MapPath("~/" + trackPathTemp);

            var stream = new FileStream(videoFilePath, FileMode.Open, FileAccess.Read);
            var result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(stream)
            };
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("video/mp4");
            result.Content.Headers.ContentRange = new ContentRangeHeaderValue(0, stream.Length);
            // result.Content.Headers.Add("filename", "Video.mp4");
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = "Video.mp4"
            };
            return result;
于 2014-04-01T10:39:14.247 に答える
0

FileSaver.js を使用して問題を解決しました。以下のコードが役に立ちました。

'$'

 DownloadClaimForm: function (claim) 
{
 url = baseAddress + "DownLoadFile";
 return  $http.post(baseAddress + "DownLoadFile", claim, {responseType: 'arraybuffer' })
                            .success(function (data) {
                                var file = new Blob([data], { type: 'application/pdf' });
                                saveAs(file, 'Claims.pdf');
                            });


    }
于 2016-09-29T09:37:24.677 に答える