web-dev-qa-db-ja.com

ダウンロード属性を持つ<a>要素またはサーバーを使用せずにファイルをダウンロードするにはどうすればよいですか？

caniuse によると、 <a> 要素の download 属性は Microsoft Edge build 10547でサポートされています+ 、ただし not IEまたはSafari ではありません。

download属性が設定された<a>要素またはサーバーを使用せずにファイルオブジェクトをダウンロードする方法

javascripthtmlfiledownloadfileapi
11
guest271314

ダウンロードをトリガーする方法はいくつかあります。以下はその一部です。

フォームを使用：

<form method="get" action="mydoc.doc">
<button type="submit">Download</button>
</form>

JavaScriptを使用：

<button type="submit" onclick="window.open('mydoc.doc')">Download</button>
14
Leo Farmer

@LeoFarmerの回答はサポートしていますが、2つの「ハッキング可能な」アプローチを提供したいと思います。

  1. ファイルが非常に小さい場合は、aを href='data:[<mediatype>][;base64],<data>' 。

    これにより、mediatypeにコンテンツの配置を追加して、HTTPヘッダーをエミュレートできます。このハックは、希望するほどポータブルではありません。

  2. 中小規模のファイルでは、AJAXを使用してファイルをダウンロードし、次に Javascript File APIを使用してファイルの保存を促す （APIは保存をサポートしていませんが、データの変換は簡単です。データURLに）。

    JavaScriptファイルAPIを回避したい場合は、アンカークリックをエミュレートしてみてください ここで推奨 。

繰り返しになりますが、Leo Farmerが指摘したように、これらのソリューションは、ブラウザーがファイルをディスクに保存するのではなく、新しいタブで開かないことを約束できませんが、すべてのユーザーが優雅にcmd+Sまたはctrl+Sキーボードショートカット:-)

3
Myst

これは、download属性とjqueryの両方を使用して行うことができます。 ieおよびsafari/iosではダウンロード属性はサポートされていません。したがって、jqueryを使用してそれを行うことができます

 $('.download').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = 'uploads/file.doc';
});

<a href="no-script.html" class="download">Download</a>
2
Jahid Hasan

FileSaver.js を使用します

一般的に使用されるすべてのブラウザーをサポートします。

含めるだけ：

<script type="text/javascript" src="FileSaver.min.js"></script>

それを次のように使用します：

var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);

注：Safari <6でも機能させるには、Opera <15およびFireFox <20を含める必要があります Blob.js 依存関係として。

1
padr

手動で作成するか、FileReader()、.readAsDataURL()を利用して、ファイルの data URIdata:[<mediatype>][;base64],<data>表現を MIME type set application/octet-stream 、encodeURIComponent()、window.open()

<script>
  var file = "data:application/octet-stream,"
             + encodeURIComponent("<!DOCTYPE html>"
             + "<html><body>"
             + "<div>abc</div>"
             + "</body></html>");
  var saveFile = window.open(file, "_self");     
</script>

<script>
  var blob = new Blob(["abc"], {type:"text/plain"});
  var reader = new FileReader();
  reader.addEventListener("load", function(e) {
    // replace existing `MIME` type with `application/octet-stream`
    var file = "data:application/octet-stream;" 
                + e.target.result.split(/;/)[1];
    var saveFile = window.open(file, "_self");
  });
  reader.readAsDataURL(blob)
</script>

plnkr http://plnkr.co/edit/IS1OC0laRwL3BuuF9zay?p=preview

1
guest271314