Javascript na vykonanie spracovania po stiahnutí súboru

Stránka aktualizovaná : štvrtok 27. júna 2024

Dátum vytvorenia strany : nedeľa 28. januára 2024

Prostredie overovania prevádzky

Vizuálne štúdio

Visual Studio 2022

ASP.NET jadro

8.0 (Razpr stránky, MVC)

Webové prehliadače

Okraj 119

Prevádzkové prostredie

Visual Studio (ak zahŕňate aj serverové programy)

Visual Studio 2022

ASP.NET Core (ak obsahuje aj serverové programy)

8.0 (Razpr stránky, MVC)

Webové prehliadače

Hrana
Google Chrome
Iné prehliadače (nie všetky sú začiarknuté)

(* Hlavným telom tohto tipu je proces na strane klienta, takže strana servera môže byť čokoľvek)

Najskôr

Hlavným zameraním týchto tipov je klientsky program (Javascript) a serverový program je tu iba na sťahovanie súborov. Preto nezáleží na tom, aký je serverový program, pokiaľ vás môže prinútiť stiahnuť súbor.

Nechajte používateľov sťahovať súbory pri prístupe na server

Pán / pani vám umožňuje sťahovať súbory, keď dostanete žiadosť. V tom čase zámerne čakáme určitý čas na serveri, aby bolo ľahké pochopiť začiatok a koniec sťahovania.

Tu je to, čo sa deje na strane servera Razor Pages a MVC: Môžete ho implementovať do iných projektov, napríklad do webového rozhrania API.

Stránky holiaceho strojčeka : Strany/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");
    }
  }
}

Spracovanie klientov

Za normálnych okolností stiahnete súbor prístupom k zadanej adrese URL vo webovom prehliadači. Ak chcete niečo urobiť po dokončení sťahovania, môžete sťahovanie spustiť pomocou Javascriptu.

Existuje mnoho spôsobov, ako to urobiť, ale v tomto prípade použijeme , čo je tiež XMLHttpRequest pôvod asynchrónneho spracovania. Môžete tiež použiť funkcie jQuery ajax alebo Fetch API.

ahref URL adresa sťahovania je napísaná v značke a id proces sa vykoná po kliknutí na ten, ktorý je nastavený na.download

$('#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 Normálne, ak ponecháte prvok kliknutý, predvolený proces sťahovania sa presunie, takže e.preventDefault(); voláme, aby sme zakázali predvolený proces.

href Získajte URL adresu na stiahnutie z a XMLHttpRequest GET nastavte ju tak, aby ste ju získali z .

XMLHttpRequest.responseTypeblob dať pokyn na stiahnutie binárnych údajov.

XMLHttpRequest.onload Keďže proces po dokončení sťahovania údajov je možné opísať v udalosti, proces po dokončení sťahovania je napísaný tu. Keďže údaje boli stiahnuté iba do klienta, súbor nie je v skutočnosti uložený lokálne. Ak chcete uložiť súbor lokálne, môžete pridať značku, ktorá obsahuje pseudoúdaje, a nastaviť ho, aby a sa správal, akoby ste klikli na odkaz a súbor uložili. Údaje v tom čase môže window.URL.createObjectURL funkcia previesť na adresu URL, takže href ju môžete nastaviť a sfunkčniť.

Názov súboru, ktorý sa má uložiť, je možné načítať z hlavičky odpovede, ak je zahrnutý v odpovedi zo servera Content-Disposition . Keďže je trochu komplikované ho získať, myslím si, že kód by sa mal používať tak, ako je. Ak názov súboru nie je zadaný na serveri, nedá sa mu pomôcť, takže si myslím, že bude nastavený na predvolený názov súboru alebo názov súboru na konci cesty URL.

Keďže tentoraz ho v konzole zobrazím až po uložení súboru, myslím si, že požadovanú operáciu je možné vykonať prepísaním tejto časti ľubovoľným kódom.

Po popísaní procesu sťahovania údajov je posledná vec, ktorú chceme urobiť, zavolať XMLHttpRequest.send funkciu, aby sme skutočne spustili žiadosť.

Odkaz na stiahnutie spustiť

Pán / pani Code poskytuje odkazy na vzor priameho sťahovania súboru a vzor jeho sťahovania pomocou Javascriptu. a URL adresu môžete napísať priamo do href značky, ale ak do ASP.NET Core napíšete nasledovné, URL adresa sa automaticky href rozbalí na .

Stránky holiaceho strojčeka : 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 : Zobrazenia/Domov/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>

Viacjazyčná podpora predvolených správ zobrazených počas overovania vstupu