[解決済み】リンクのないJavaScriptのblobファイル名
2022-04-02 14:16:19
質問
で強制ダウンロードする場合、JavaScriptでBlobファイルの名前をどのように設定するのですか?
window.location
?
function newFile(data) {
var json = JSON.stringify(data);
var blob = new Blob([json], {type: "octet/stream"});
var url = window.URL.createObjectURL(blob);
window.location.assign(url);
}
上記のコードを実行すると、ページを更新することなく瞬時に次のようなファイルがダウンロードされます。
bfefe410-8d9c-4883-86c5-d76c50a24a1d
ファイル名を my-download.json の代わりに
解決方法は?
私が知っている唯一の方法は、次のようなトリックです。 ファイルセーバー.js :
-
非表示を作成する
<a>
タグを使用します。 -
を設定します。
href
属性にblobのURLを指定します。 -
を設定します。
download
属性にファイル名を指定します。 -
をクリックします。
<a>
タグを使用します。
以下は簡略化した例です( jsfiddle ):
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
var data = { x: 42, s: "hello, world", d: new Date() },
fileName = "my-download.json";
saveData(data, fileName);
この例は説明のために書いたもので、実際のコードでは代わりにFileSaver.jsを使用してください。
備考
- HTML5の一部であるため、古いブラウザでは"download"属性はサポートされていません。
- ファイル形式によっては、ブラウザが安全でないと判断し、ダウンロードに失敗することがあります。JSONファイルを拡張子txtで保存するとうまくいきます。
関連
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません
-
[解決済み】JavaScriptで相対URLへのリダイレクトを行う
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする
-
[解決済み] JavaScriptの配列情報をcsvにエクスポートする方法(クライアント側)?
-
[解決済み】Angular2以上でファイルをダウンロードする方法