ただし、ブラウザーによって制限されるため、多くの場合、リンクを提供し、ユーザーがクリックして開く -> 名前を付けて保存することしかできません。次のリンクのように:
次のようにコードをコピーします。
<a href="file.js">file.js</a>
ユーザーがこのリンクをクリックすると、ブラウザが開き、リンクが指すファイルの内容が表示されますが、これは明らかにニーズを満たしていません。 HTML5 では、a タグに download 属性が追加され、この属性が存在する限り、リンクがクリックされたときにブラウザーはリンクが指すファイルを開きませんが、代わりにダウンロードします (現在、Chrome、Firefox および Firefox でのみサポートされています)。オペラ）。
ダウンロード時には、リンクの名前がファイル名として直接使用されますが、ダウンロードするファイル名を追加するだけで変更できます (download="not-a-file.js")。
しかし、これだけでは十分ではありません。上記の方法は、ファイルがサーバー上にある場合にのみ使用できます。ブラウザ側で js によって生成されたコンテンツをブラウザにダウンロードさせたい場合はどうすればよいでしょうか?
実際、これを行う方法はまだあります。DataURI という言葉を聞いたことがある人は多いと思います。次のようなものです。
次のようにコードをコピーします。
<img src="データ:イメージ/gif;base64,R0lGOXXXXX">
DataURI の説明はここに移動できますが、ここでは説明しません。
そのため、js によって生成されたコンテンツをダウンロードするときに従うべき法則が存在します。次のようにメソッドにカプセル化されます。
次のようにコードをコピーします。
function downloadFile(aLink, fileName, content){
aLink.download = ファイル名;
aLink.href = "データ:テキスト/プレーン" + コンテンツ;
}
downloadFile を呼び出した後、ユーザーはリンクをクリックしてブラウザーのダウンロードをトリガーします。
しかし、上記の方法には不十分な点が 2 つあり、多くの怠け者の女の子が失われることになります。
ダウンロードできるファイルの種類に制限がありますが、加工した写真をダウンロードしたい場合はどうすればよいですか？
ダウンロードするには再度クリックする必要があり、面倒です。
ファイル タイプの問題を解決するには、ブラウザの新しい API (URL.createObjectURL) を使用します。通常、URL.createObjectURL は、画像を表示するために画像の DataURI を作成するために使用されます。そしてブラウザにファイルの種類の設定を手伝ってもらいましょう。
URL.createObjectURL のパラメータは File オブジェクトまたは Blob オブジェクトです。File オブジェクトは、input[type=file] で選択されたファイルです。詳細な説明は、こちらを参照してください。
ここで、ファイル タイプの制限の問題を解決するには、コンテンツを含む ObjectURL を作成し、それを aLink に割り当てるだけです。
ファイルの自動ダウンロードも非常に簡単で、UI クリック イベントを自分で作成し、それを自動的にトリガーして自動ダウンロードを実現できます。
それでは、最終的なコードを見てみましょう。
次のようにコードをコピーします。
function downloadFile(ファイル名, コンテンツ){
var aLink = document.createElement('a');
var blob = 新しい Blob([コンテンツ]);
var evt = document.createEvent("HTMLイベント");
evt.initEvent("click", false, false);//最後の 2 つのパラメータを指定しない initEvent は、FF でエラーを報告します。Barret Lee さんのフィードバックに感謝します。
aLink.download = ファイル名;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
これで、downloadFile が呼び出されるとすぐに、ファイルが自動的にダウンロードされます。素晴らしいですね。
注: 現在 (2014-01)、Blob と URL.createObjectURL は標準ブラウザーでプライベート プレフィックスを追加する必要がなくなりました。そのため、安心して使用できます~~ 心配な場合は、Can I Use を確認してください。