JS を使用して、browser_javascript スキルでダウンロード ファイルを作成する

ただし、ブラウザーによる制限があるため、多くの場合、リンクを提供し、ユーザーがクリックして開く -> 名前を付けて保存することしかできません。次のリンクなど:

コードをコピー コードは次のとおりです:

file.js

ユーザーがこのリンクをクリックすると、ブラウザが開き、リンクが指すファイルのコンテンツが表示されますが、これは明らかにニーズを満たしていません。 HTML5 では、a タグに download 属性が追加され、この属性が存在する限り、リンクをクリックすると、ブラウザーはリンクが指すファイルを開かず、代わりにダウンロードします (現在、Chrome、Firefox、および 3 つでのみサポートされています)。オペラ）。

ダウンロードする場合、リンクの名前がファイル名として直接使用されますが、ダウンロードするファイル名を追加するだけで変更できます (download="not-a-file.js" など)。

しかし、これだけでは十分ではありません。上記の方法は、ファイルがサーバー上にある場合にのみ使用できます。ブラウザ側で js によって生成されたコンテンツをブラウザにダウンロードさせたい場合はどうすればよいでしょうか?

実際、それを行う方法はまだあります。DataURI という言葉を聞いたことがある人は多いと思います。

コードをコピーします コードは次のとおりです:

DataURI 説明はここに移動できますが、ここでは説明しません。
つまり、js によって生成されたコンテンツをダウンロードするための法的根拠ができました。次のようにメソッドにカプセル化されます:

コードをコピー コードは次のとおりです:

function downloadFile (aLink, fileName , content){
aLink.download = fileName;

aLink.href = "data:text/plain," content;
}

downloadFile を呼び出した後、ユーザーはリンクをクリックしてブラウザーのダウンロードをトリガーします。

しかし、上記の方法には 2 つの欠点があり、多くの怠け者の女の子が失われることになります。

ダウンロードできるファイルの種類が制限されています。加工した写真をダウンロードしたい場合はどうすればよいですか?

ダウンロードするにはもう一度クリックする必要があり、面倒です。
ファイルの種類の問題を解決するには、ブラウザの新しい API (URL.createObjectURL) を使用します。通常、画像の作成には URL.createObjectURL が使用されます。ファイルをダウンロードするには、ブラウザを使用してファイルの種類を設定します。

URL.createObjectURL のパラメータは File オブジェクトまたは Blob オブジェクトです。File オブジェクトは、input[type=file] で選択されたファイルです。詳細な説明は、こちらを参照してください。

ここで、ファイル タイプの制限の問題を解決するには、コンテンツを含む ObjectURL を作成し、それを aLink に割り当てるだけです。

ファイルの自動ダウンロードも非常に簡単です。UI クリック イベントを自分で作成し、それを自動的にトリガーして自動ダウンロードを実現できます。

次に、最終的なコードを見てみましょう:

コードをコピーします コードは次のとおりです:

関数 downloadFile (ファイル名, コンテンツ){
var aLink = document.createElement('a');

var blob = new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent ("click", false, false);//最後の 2 つのパラメーターを指定しない initEvent は、FF でエラーを報告します。フィードバックをくださった Barret Lee に感謝します。
aLink.download = fileName;
aLink.href = URL。 createObjectURL( blob);
aLink.dispatchEvent(evt);
}

これで、downloadFile が呼び出されるとすぐに、ファイルが自動的にダウンロードされます。素晴らしいですね。

注: 現在 (2014-01)、Blob と URL.createObjectURL は標準ブラウザーでプライベート プレフィックスを追加する必要がなくなったので、安心して使用できます~~ 心配な場合は、「使用できますか?」を確認してください。