download属性を持つ<a>要素やサーバーを使わずにファイルをダウンロードするにはどうすればいいですか?

How to download a file without using <a> element with download attribute or a server?


質問 written by guest271314 @2016-08-02 04:31:57Z

: 10 : 6 : 10

caniuseによると、 <a>要素のdownload属性はMicrosoft Edgeビルド10547以降でサポートされています、IEやSafariではサポートされていません

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

コメント 1

あなたはここで私の答えをチェックすることができます: stackoverflow.com/questions/38524320/..それはあなたが探しているものを正確に与えます。

written by Dekel @2017-08-06 21:42:10Z

コメント 2

@Dekel OPの基準を参照してください。ブラウザ開発のその時点では.responseTypeは定義されていません。

written by guest271314 @2017-08-07 00:04:30Z

コメント 3

2016-browser-compatibleまたは2017のソリューションをお探しですか?:)

written by Dekel @2017-08-07 06:45:05Z

コメント 4

@Dekel事後に元の質問の文脈を変えようとしないでしょう。FileReaderなしでBlobおよびFileオブジェクトからArrayBufferおよびdata URIを作成する方法を参照してください解決策は提供されていましたが、独自の基準を満たしていない回答が投稿されたところで、Kaiidoは適切な文脈を正確に指摘しました。

written by guest271314 17/07/07の @2017-08-07 14:07:29Z

コメント 5

「サーバー」がないとどういう意味ですか?

written by Dehan de Croos @2017-08-09 04:17:34Z

回答 1 written by Star @2018-03-09 12:45:40Z
13

ダウンロードを開始する方法はいくつかあります。 以下はそのいくつかです。

フォームを使う:

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

JavaScriptを使用してください。

Use javascript:

コメント 1

ユーザーがmydoc.docを開くブラウザプラグインを持っているとどうなりますか?それはどのようにダウンロードされますか?

written by スター @2017-08-08 09:37:48Z

コメント 2

ユーザーは、ブラウザプラグインを介して自分が見たコンテンツを保存することを選択できます。ただし、フロントエンドからダウンロードを強制することはできません。これを参照してください。stackoverflow.com / questions / 8613725 / ..

written by Leo Farmer @2017-08-08 19:50:57Z

回答 2 written by Myst @2017-08-09 06:41:47Z
3

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

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

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

  2. 中小ファイルでは、AJAXを使用してファイルをダウンロードしてから、Javascript File APIを使用してファイル保存を促すことができます (APIでは保存はサポートされていませんが、データをデータURLに変換するのは簡単です)。

    Javascript File APIを避けたい場合は、 ここで提案されているように、アンカークリックをエミュレートしてみることができます

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

回答 3 written by Jahid Hasan @2017-08-09 05:44:42Z
2

download属性とjqueryの両方を使ってこれを行うことができます。 download属性は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>
回答 4 written by padr @2017-08-09 06:17:25Z
1

FileSaver.jsを使用する

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

以下を含めるだけです:

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

そしてそれを次のように使います。

and use it like:

注意: Safari <6、Opera <15、FireFox <20でも動作させるには、依存関係としてBlob.jsを含める必要があります。

コメント 1

FileコンストラクタはAnswerの最後の文で述べたブラウザで利用できますか?

written by guest271314 @2017-08-09 13:19:15Z

コメント 2

いいえ、違います。caniuse.com/#search=File )しかしFileSaver.jsのドキュメンテーションを見てください、それを保存する他の方法があります。お役に立てば幸いです。:)

written by パドル @2017-08-09 17:41:19Z

回答 5 written by Star @2018-03-09 12:46:58Z
1

data URI data:[<mediatype>][;base64],<data>を使用data URIことができますdata:[<mediatype>][;base64],<data>手動またはFileReader()使用して作成されたファイルのdata:[<mediatype>][;base64],<data>表現、 MIMEタイプをapplication/octet-streamencodeURIComponent()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>

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

回答 6 written by Pradeep Kumar Das @2017-08-09 07:07:12Z
1

サーバーサイドを使用している場合は、フォーム送信メカニズムに従ってページをレンダリングします。 MVCでは、以下のコードを使用できます

HTML

  @using (Html.BeginForm("GetAttachment", "User", FormMethod.Post))
                {

                    <button type="submit">Download</button>   
                }

MVCコントローラー

MVC Controller

コメント 1

「ダウンロード属性またはサーバーで<a>要素を使用せずに」

written by guest271314 @2017-08-09 13:20:13Z

コメント 2

フォームを使用してサーバーにデータを送信し、サーバーがファイルを返します。

written by Pradeep Kumar Das @2017-08-09 13:51:41Z

コメント 3

<form>はサーバーに送信する必要はありません。質問の要件は、サーバーを使用しないことです

written by guest271314 @2017-08-09 13:53:40Z

コメント 4

よく分からない?

written by guest271314 @2017-08-09 14:03:42Z

コメント 5

なぜjQueryプラグインが必要なのですか?

written by guest271314 @2017-08-09 14:09:39Z