Javascript pro provedení zpracování po stažení souboru

Stránky aktualizovány : čtvrtek 27. června 2024

Datum vytvoření stránky : neděle 28. ledna 2024

Prostředí pro ověřování provozu

Visual Studio

Visual Studio 2022

ASP.NET jádro

8.0 (Razpr stránky, MVC)

Webové prohlížeče

Hrana 119

Provozní prostředí

Visual Studio (pokud zahrnete také serverové programy)

Visual Studio 2022

ASP.NET Core (pokud obsahuje i serverové programy)

8.0 (Razpr stránky, MVC)

Webové prohlížeče

Okraj
Google Chrome
Ostatní prohlížeče (ne všechny zaškrtnuté)

(* Hlavní částí tohoto tipu je proces na straně klienta, takže na straně serveru může být cokoli)

Nejprve

Tyto tipy se zaměřují především na klientský program (Javascript) a serverový program slouží pouze ke stahování souborů. Proto nezáleží na tom, jaký je serverový program, pokud vás může přimět ke stažení souboru.

Umožnit uživatelům stahovat soubory, když se k nim přistupuje na serveru

Pan/paní vám umožňuje stahovat soubory, když obdržíte žádost. V té době záměrně čekáme určitou dobu na serveru, aby bylo snadné pochopit začátek a konec stahování.

Tady je to, co se stane na straně serveru Razor Pages a MVC: Můžete ho implementovat v jiných projektech, jako je například webové rozhraní API.

Razor Stránky: Stránky/Index.cshtml.cs

// 省略

namespace DownloadCompleteNotifyRazorPages.Pages
{
  public class IndexModel : PageModel
  {
    // 省略

    /// <summary>時間をかけてファイルをダウンロードします。</summary>
    public async Task<IActionResult> OnGetDownload()
    {
      // ダウンロード開始と完了を明確にする目的で待機を入れる
      await Task.Delay(5000);

      // 適当にファイルを作って返す
      var fileSize = 10_000_000;
      var sb = new System.Text.StringBuilder(fileSize);
      for (int i = 0; i < fileSize; i++) sb.Append('a');
      using var stream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(sb.ToString()));
      return File(stream.ToArray(), "text/plain", $"ダウンロード.txt");
    }
  }
}

MVC : Coletollers/HomeController.cs

// 省略

namespace DownloadCompleteNotifyMvc.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    /// <summary>時間をかけてファイルをダウンロードします。</summary>
    public async Task<IActionResult> Download()
    {
      // ダウンロード開始と完了を明確にする目的で待機を入れる
      await Task.Delay(5000);

      // 適当にファイルを作って返す
      var fileSize = 10_000_000;
      var sb = new System.Text.StringBuilder(fileSize);
      for (int i = 0; i < fileSize; i++) sb.Append('a');
      using var stream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(sb.ToString()));
      return File(stream.ToArray(), "text/plain", $"ダウンロード.txt");
    }
  }
}

Zpracování klientů

Za normálních okolností stáhnete soubor přístupem k zadané adrese URL ve webovém prohlížeči. Pokud chcete po dokončení stahování něco udělat, můžete stahování spustit pomocí Javascriptu.

Existuje mnoho způsobů, jak to udělat, ale v tomto případě použijeme , což je také XMLHttpRequest původ asynchronního zpracování. Můžete také použít funkce jQuery ajax nebo rozhraní Fetch API.

ahref Adresa URL pro stažení je zapsána do značky a id proces se spustí, když se klikne na adresu nastavenou nadownload.

$('#download').click(function (e) {
  console.log('ダウンロードを開始します。');
  e.preventDefault();  // href による画面遷移を抑止
  let url = $(e.target).attr('href');  // href からダウンロード URL 取得

  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);   // ダウンロード先 URL 設定
  xhr.responseType = 'blob';   // バイナリデータ取得であることを指示

  // ダウンロード完了後の処理を設定。この時点ではデータは取得してクライアントにありますが保存はしていません。
  xhr.onload = function (oEvent) {
    if (xhr.status !== 200) {
      console.log(`データの取得に失敗しました。(status=${xhr.status})`);
    } else {
      // 取得したデータ
      let blob = xhr.response;

      // レスポンスヘッダーからサーバーから送られてきたファイル名を取得する
      let fileName = '';
      let disposition = xhr.getResponseHeader('Content-Disposition');
      if (disposition && disposition.indexOf('attachment') !== -1) {
        let filenameRegex = /filename[^;=\n]=((['"]).*?\2|[^;\n]*)/;
        let matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) {
          // 「filename*=UTF-8''%E3%83%87%E3%83%BC%E3%82%BF.txt;」からファイル名を取得
          fileName = decodeURI(matches[1].replace(/['"]/g, '').replace('utf-8', '').replace('UTF-8', ''));
        }
      }
      if (fileName === '') {
        // ファイル名を取得できなかったら念のため URL をファイル名とする
        let fileName = url.match('.+/(.+?)([\?#;].*)?$')[1];
      }

      // Blob オブジェクトを指す URL オブジェクトを作る
      let objectURL = window.URL.createObjectURL(blob);
      // リンク（<a>要素）を生成し、JavaScript からクリックする
      let link = document.createElement('a');
      document.body.appendChild(link);
      link.href = objectURL;
      link.download = fileName;   // download を指定するとブラウザで開くことなくダウンロードになる
      link.click();
      document.body.removeChild(link);

      console.log('ダウンロードを完了しました。');
    }
  };

  // リクエスト開始
  xhr.send();
});

a Za normálních okolností, pokud necháte prvek kliknutý, výchozí proces stahování se přesune, takže e.preventDefault(); zavoláme a výchozí proces zakážeme.

href Získejte adresu URL pro stažení z a XMLHttpRequest GET nastavte ji tak, aby ji získala z .

XMLHttpRequest.responseTypeblob pokyn binárním datům, která se mají stáhnout.

XMLHttpRequest.onload Vzhledem k tomu, že proces po dokončení stahování dat lze popsat v události, je zde popsán postup po dokončení stahování. Vzhledem k tomu, že data byla stažena pouze do klienta, soubor není ve skutečnosti uložen místně. Chcete-li soubor uložit místně, můžete přidat značku, která obsahuje pseudodata, a nastavit ji tak, aby a se chovala, jako byste klikli na odkaz a soubor uložili. Data v té době mohou window.URL.createObjectURL být funkcí převedena na adresu URL, takže href je můžete nastavit na a zprovoznit.

Název souboru, který se má uložit, lze načíst z hlavičky odpovědi, pokud je zahrnut v odpovědi ze Content-Disposition serveru. Vzhledem k tomu, že je trochu komplikované jej získat, myslím, že kód by měl být používán tak, jak je. Pokud název souboru není na serveru uveden, nelze pomoci, takže si myslím, že bude nastaven na výchozí název souboru nebo název souboru na konci cesty URL.

Vzhledem k tomu, že jej tentokrát zobrazuji v konzoli až po uložení souboru, myslím, že požadovanou operaci lze provést přepsáním této části libovolným kódem.

Jakmile je proces stahování dat popsán, poslední věc, kterou chceme udělat, je XMLHttpRequest.send zavolat funkci, která požadavek skutečně spustí.

Stáhnout odkaz na spuštění

Mr./Ms. Code poskytuje odkazy na vzor přímého stahování souboru a vzor jeho stahování pomocí Javascriptu. a Adresu URL můžete zapsat přímo do href značky, ale pokud do ASP.NET Core napíšete následující, adresa URL se automaticky href rozbalí na .

Razor Stránky: Pages/Index.cshtml

<ul>
  <li><a asp-page-handler="Download">ダウンロード (Javascript なし)</a></li>
  <li><a asp-page-handler="Download" id="download">ダウンロード (Javascript あり)</a></li>
</ul>

MVC: Zobrazení/Domů/Index.cshtml

<ul>
  <li><a asp-controller="Home" asp-action="Download">ダウンロード (Javascript なし)</a></li>
  <li><a asp-controller="Home" asp-action="Download" id="download">ダウンロード (Javascript あり)</a></li>
</ul>

Vícejazyčná podpora výchozích zpráv zobrazených během ověřování vstupu