新しいページを開くのではなく、SafariとIEのダウンロードイメージを作成するには？

Question

FirefoxとChromeでは、このリンクプロパティ「download = img.jpg」がうまく動作し、新しいタブやページの代わりにダウンロードウィンドウが表示されます。

<a href="img.jpg" download="img.jpg">Download Image</a> 

しかし、SafariとIEでは、このリンクから新しいページが表示されます。

SafariとIEブラウザでこれを処理する簡単で効果的なワークフローは何ですか？

Answer 1

Apacheサーバーで作業していますか？もしそうなら、あなたは自分の.htaccessファイルに以下を追加することができます：パラメータFDL = 1は、オクテットストリーム/力のダウンロード

として 出力をクエリ文字列である場合、それは をチェックし、ファイルの参照するには

RewriteCond %{REQUEST_FILENAME} -f 
RewriteCond %{QUERY_STRING} fdl=1 
RewriteRule .? - [T=application/octet-stream] 

のチェックを今、あなたはブラウザだけでURLにパラメータを入れて、そのサイトには何もダウンロードを開始したいとき：

<a href="img.jpg?fdl=1">Download Image</a> 

IISのWindowsサーバ上で同じことを行うには、web.configファイルへのアウトバウンドルールを追加します。

<?xml version="1.0" encoding="UTF-8"?> 
<configuration> 
    <system.webServer> 
     <rewrite> 
      <outboundRules> 
       <rule name="Force Download"> 
        <match serverVariable="RESPONSE_Content_Disposition" pattern=".?" negate="false" /> 
        <action type="Rewrite" value="application/octet-stream" replace="true" /> 
        <conditions> 
         <add input="{QUERY_STRING}" pattern="fdl=1" /> 
        </conditions> 
       </rule> 
      </outboundRules> 
     </rewrite> 
    </system.webServer> 
</configuration> 

EDIT（2016年10月4日）：

download属性は、まだすべてのブラウザでnot fully adoptedであるように見えます。

JavaScript /ブラウザベースの実装では、サポートしていないブラウザで機能を保存するためのポリフィルであるFileSaver.jsを見ることができます。それは完璧なカバレッジを持っていません。

Answer 2

最も簡単なのは、PHPのようなサーバー側の言語を使用することです。このページでは、ヘッダーなどを操作するためのいくつかの試行コードを含め、実際に詳細に説明しています。残念ながら、これらはIEとSafariが追いつくまでの唯一の解決策です。

Refrence：

• HTML href image link download on click

Answer 3

navigator.msSaveBlob(blob, filename) 

https://msdn.microsoft.com/sv-se/library/windows/apps/hh772331

残念ながら、私はSafariでそれを行う方法を知りません。

Answer 4

これはJavaScriptでIEで行う方法です。しかし、私はまだサファリのための解決策を見つけることができません

var canvas = document.createElement('canvas'); 
var img = document.createElement('img'); 
img.onload = function(e) { 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var context = canvas.getContext('2d'); 
    context.drawImage(img, 0, 0, img.width, img.height); 
    window.navigator.msSaveBlob(canvas.msToBlob(),'image.jpg'); 
} 
img.src = 'img.jpg;