4

モデルのデータを CSV ファイルとしてダウンロードできるようにするダウンロード リンクを角度アプリで作成しようとしています。実際のダウンロードリンクを除いて、すべて機能しています。filesaver.js を使用すると Karma で単体テストが爆破されるので、手動で行うだけで調査しています。

以下は私が持っているものです。コントローラーで:

var blob = new Blob([data.join('\n')], {type: 'text/csv;charset=utf-8'});
$scope.downloadUrl = URL.createObjectURL(blob);

ビューには、次のものがあります。

<a ng-href="{{downloadUrl}}" download="ttester.csv" id="download">Download</a>

問題は、Firefox 20 で「unsafe:blob:af775c64-dcb1-864a-8eaa-adebe7f101a7」という URL の新しいページが開くことです。「unsafe:」プレフィックスに注意してください。そのプレフィックスを削除すると、データが正しくダウンロードされますが、必要なファイル名がありません。

ハイパーリンクを機能させるために欠けているものは何ですか? ファイルのファイル名が tester.csv のダウンロード ダイアログが開くことを期待しています。

本当に助けてくれてありがとう

4

1 に答える 1

2

次のコードを使用すると、偽のリンクである blob を作成し、この偽のリンクでクリック イベントをディスパッチできます。新しいページを開く必要はありませんが、保存ダイアログ ボックスが直接表示されることに注意してください。

var blob = new Blob([data.join('\n')], {type: 'text/csv;charset=utf-8'});
var url  = window.URL || window.webkitURL;
var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
link.href = url.createObjectURL(blob);
link.download = 'teams.csv'; // whatever file name you want :)

var event = document.createEvent("MouseEvents");
event.initEvent("click", true, false);
link.dispatchEvent(event);

ここで動作するフィドルを見ることができます

于 2013-10-08T18:43:11.287 に答える