1. ホーム
  2. javascript

[解決済み] content-dispositionからファイル名を取得する方法

2023-04-20 18:28:07

質問

ajaxのレスポンスとしてファイルをダウンロードしました。ファイル名とファイルタイプを content-disposition からファイル名とファイルタイプを取得し、そのサムネイルを表示する方法です。私は多くの検索結果を得たが、正しい方法を見つけることができませんでした。

$(".download_btn").click(function () {
  var uiid = $(this).data("id2");

  $.ajax({
    url: "http://localhost:8080/prj/" + data + "/" + uiid + "/getfile",
    type: "GET",
    error: function (jqXHR, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    },
    success: function (response, status, xhr) {
      var header = xhr.getResponseHeader('Content-Disposition');
      console.log(header);     
    }
});

コンソール出力です。

inline; filename=demo3.png

どのように解決するのですか?

以前、私が使った方法を紹介します。 サーバーの応答として添付ファイルを提供することを想定しています。

RESTサービスからこのようにレスポンスヘッダを設定しました。 response.setHeader("Content-Disposition", "attachment;filename=XYZ.csv");

function(response, status, xhr){
    var filename = "";
    var disposition = xhr.getResponseHeader('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
        var matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) { 
          filename = matches[1].replace(/['"]/g, '');
        }
    }
}

EDIT あなたの質問に合うように答えを編集する-単語の使用 inline の代わりに attachment

function(response, status, xhr){
    var filename = "";
    var disposition = xhr.getResponseHeader('Content-Disposition');
    if (disposition && disposition.indexOf('inline') !== -1) {
        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
        var matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) { 
          filename = matches[1].replace(/['"]/g, '');
        }
    }
}

詳細はこちら