12

ユーザーにダウンロードしてもらいたいデータURIがメモリにあります。

このフィドルはクロームで動作しますが、FFでは動作しません：http：//jsfiddle.net/6W2TY/

[実行]をクリックすると、小さな画像がクロムでダウンロードされ、FFでは何も実行されません。FFで機能しない理由と、それを機能させるために何をする必要があるのか​​を誰かが理解するのを手伝ってもらえますか？

ありがとう！

4

2 に答える 2

31

これは古い投稿だと思いますが、FFでファイルをダウンロードするときに同様の問題が発生したときに遭遇しました。これは、質問が書かれた時点ではFFで機能していなかった可能性がありますが、現在は機能しています。

a = document.createElement('a');
document.body.appendChild(a);
a.download = name;
a.href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg==";
a.click();

元のフィドルからの変更点：

  1. に呼び出しを追加document.body.appendChild(a);
  2. triggerEvent()に変更a.click()

更新されたフィドルは次のとおりです：http： //jsfiddle.net/70f91ao7/6/

于 2014-12-03T20:04:11.527 に答える
10

新しい（html5）ダウンロード属性を使用しています。私の知る限り、これはChromeでのみサポートされており、Firefoxでは（まだ）サポートされていません。

アップデート3-2018
この機能は、ほとんどすべての主要なブラウザーでサポートされるようになりました（IEはサポートされていません）。

代替：location.hrefを使用する

ダウンロードを強制する別の方法は、次のようにユーザーを画像にリダイレクトすることです。

// generate the image
var img = ""

// then call a function maybe onClick or something
downloadImage(img);

function downloadImage(data) {
    location.href = "data:application/octet-stream;base64," + data;
}

またはショートバージョン

location.href = "data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABWSURBVDhPY0xISPh//0UOA7mAiVyNMH2jBjAwkBQGjD9KGBTEJ6OEO0kG2NvbMwCjnXwDsEU5SS5ANuDhjRCGJbPFSQsDdBfIyMhQZgDIQLK9QLWkDABPsQw5I+5qmAAAAABJRU5ErkJggg=="

代替：サーバー側

別の方法として、イメージサーバーサイドを処理している場合は、content-dispositionヘッダーを設定してダウンロードを強制できます。

PHPの例

header('Content-Disposition: attachment; filename="image.png"');
于 2012-10-01T16:03:09.187 に答える