html - JavaScriptでダウンロードの名前を変更する

Question

ユーザーが次のようなダウンロード可能なリンクをクリックすると、

<a href="downloadable.txt">Download</a>

[名前を付けて保存] ダイアログの前にファイルの名前を変更するクライアント側 (html または JavaScript) の方法はありますか?

Answer 1

HTML5 には、a[download]ファイルの名前を変更できる属性が用意されています。この例では、ダウンロードlink.txtして名前を変更しsomething.txtます。

​&lt;a download="something.txt" href="link.txt">asdf</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​

これは同じオリジンの URL でのみ機能することに注意してください (つまり、異なるドメイン間では機能しません)。

Answer 2

いいえ、クライアント側 (HTML または JavaScript) からこれを変更することはできません。サーバーから変更する必要があります。1 つの方法は、Content-Disposition HTTP 応答ヘッダーを設定するサーバー側スクリプトを使用することです。

Content-Disposition: attachment; filename=somecustomname.txt

Answer 3

eligrey によって記述された Filessaver.js スクリプトを使用できます (ここの例では angularjs を使用しています) XmlHttpRequest オブジェクトを使用して、従来の JavaScript で同じことを実現できます。

//In your html code , add these : ->
<script src="https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
//In your Javascript:- 

$http({
        url: "url where the file is located",
        method: "GET",
        responseType: "blob"
    }).then(function (response) {

saveAs(response.data,"newfilename.extension");

})