Javascript suorittaa käsittelyn tiedoston lataamisen jälkeen

Toiminnan todentamisympäristö

Visuaalinen studio

• Visuaalinen studio 2022

ASP.NET ydin

• 8.0 (Razpr-sivut, MVC)

Selaimet

• Reuna 119

Toimintaympäristö

Visual Studio (jos sisällytät myös palvelinohjelmat)

• Visuaalinen studio 2022

ASP.NET Core (jos se sisältää myös palvelinohjelmia)

• 8.0 (Razpr-sivut, MVC)

Selaimet

• Reuna
• Google Chrome
• Muut selaimet (kaikkia ei ole valittu)

(* Tämän vinkin päärunko on asiakaspuolen prosessi, joten palvelinpuoli voi olla mikä tahansa)

Alun perin

Näiden vinkkien pääpaino on asiakasohjelma (Javascript), ja palvelinohjelma on vain tiedostojen lataamiseen. Siksi ei ole väliä mikä palvelinohjelma on, kunhan se voi saada sinut lataamaan tiedoston.

Pyydä käyttäjiä lataamaan tiedostoja, kun heitä käytetään palvelimella

Mr./Ms. antaa sinun ladata tiedostoja, kun saat pyynnön. Tuolloin odotamme tarkoituksella tietyn ajan palvelimella, jotta latauksen alku ja loppu on helppo ymmärtää.

Näin tapahtuu Razor Pagesin ja MVC:n palvelinpuolella: Voit ottaa sen käyttöön muissa projekteissa, kuten verkko-ohjelmointirajapinnassa.

Partakoneen sivut : Sivut/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");
    }
  }
}

Asiakkaan käsittely

Yleensä tiedosto ladataan avaamalla määritetty URL-osoite verkkoselaimessa. Jos haluat tehdä jotain latauksen jälkeen, voit suorittaa latauksen Javascriptillä.

Tähän on monia tapoja, mutta tässä tapauksessa käytämme , joka on myös XMLHttpRequest asynkronisen käsittelyn alkuperä. Voit myös käyttää jQuery ajax -funktioita tai Hae API -sovellusliittymää.

ahref Latauksen URL-osoite kirjoitetaan -tunnisteeseen ja id prosessi suoritetaan, kun valittua URL-osoitetta download napsautetaan.

$('#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 Normaalisti, jos jätät elementin napsautetuksi, oletuslatausprosessi siirtyy, joten e.preventDefault(); kutsumme poistamaan oletusprosessin käytöstä.

href Hanki latauksen URL-osoite osoitteesta ja XMLHttpRequest GET aseta se hakemaan se kohteesta .

XMLHttpRequest.responseTypeblob ohjeistaaksesi kopioitavia binääritietoja.

XMLHttpRequest.onload Koska tietojen lataamisen jälkeinen prosessi voidaan kuvata tapahtumassa, latauksen jälkeinen prosessi on kirjoitettu tähän. Koska tiedot on ladattu vain asiakkaaseen, tiedostoa ei varsinaisesti tallenneta paikallisesti. Jos haluat tallentaa tiedoston paikallisesti, voit lisätä tunnisteen, joka a sisältää pseudotietoja, ja saada sen käyttäytymään ikään kuin olisit napsauttanut linkkiä ja tallentanut tiedoston. Toiminto voi window.URL.createObjectURL muuntaa tuolloin tiedot URL-osoitteeksi, joten href voit asettaa sen ja saada sen toimimaan.

Tallennettava tiedostonimi voidaan noutaa vastauksen otsikosta, jos se sisältyy palvelimen vastaukseen Content-Disposition . Koska sen hankkiminen on hieman monimutkaista, mielestäni koodia tulisi käyttää sellaisenaan. Jos tiedostonimeä ei ole määritetty palvelimessa, sitä ei voida auttaa, joten luulen, että se asetetaan oletustiedostonimeksi tai tiedostonimeksi URL-polun lopussa.

Koska tällä kertaa näytän sen konsolissa vasta tiedoston tallentamisen jälkeen, mielestäni haluttu toiminto voidaan suorittaa kirjoittamalla tämä osa mielivaltaisella koodilla.

Kun tietojen latausprosessi on kuvattu, viimeinen asia, jonka haluamme tehdä, on XMLHttpRequest.send kutsua toiminto pyynnön käynnistämiseksi.

Lataa suorituslinkki

Mr./Ms. Code tarjoaa linkkejä tiedoston suoraan lataamisen malliin ja sen lataamiseen Javascriptillä. a Voit kirjoittaa URL-osoitteen suoraan -tagiin href , mutta jos kirjoitat ASP.NET Coressa seuraavaa, URL-osoite laajenee automaattisesti href muotoon .

Partakoneen sivut : Sivut/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 : Näkymät/Koti/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>