如何鏈接到沒有Firefox添加「不安全」前綴的數據URL

Question

我試圖在一個角度的應用程序中創建一個下載鏈接，使模型中的數據可以下載爲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的新頁面的URL「不安全：斑點：af775c64-dcb1-864a- 8eaa-adebe7f101a7「，請注意」不安全：「前綴。刪除該前綴正確下載數據，但沒有我想要的文件名。

我在超鏈接中錯過了什麼讓它工作？我期望它打開一個文件名爲tester.csv的下載對話框。

真的很感謝所有幫助

Answer 1

你可以使用下面的代碼將創建BLOB，假鏈接，將這個假鏈接調度click事件。請注意，不應該打開新頁面，但會直接提示保存對話框。

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); 

你可以看到一個工作小提琴here