Javascript töötlemiseks pärast faili allalaadimist

Toimingu kontrollimise keskkond

Visuaalne stuudio

• Visual Studio 2022

ASP.NET Tuum

• 8.0 (Razpr lehed, MVC)

Veebibrauserid

• Serv 119

Töökeskkond

Visual Studio (kui lisate ka serveriprogramme)

• Visual Studio 2022

ASP.NET Core (kui see sisaldab ka serveriprogramme)

• 8.0 (Razpr lehed, MVC)

Veebibrauserid

• Äär
• Google Chrome
• Muud brauserid (kõik pole kontrollitud)

(* Selle näpunäite põhiosa on kliendipoolne protsess, nii et serveri pool võib olla ükskõik milline)

Alguses

Nende näpunäidete põhirõhk on kliendiprogrammil (Javascript) ja serveriprogramm on ainult failide allalaadimiseks. Seetõttu ei ole oluline, milline on serveriprogramm, kui see suudab faili alla laadida.

Laske kasutajatel faile alla laadida, kui neile serveris juurde pääsetakse

Hr./Ms. võimaldab teil taotluse saamisel faile alla laadida. Sel ajal ootame serveris teadlikult teatud aega, et allalaadimise algust ja lõppu oleks lihtne mõista.

Razor Pages'i ja MVC serveri poolel juhtub järgmine: Saate seda rakendada teistes projektides, näiteks Web API-s.

Habemenuga lehed : Leheküljed/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");
    }
  }
}

Kliendi töötlemine

Tavaliselt laadite faili alla, avades veebibrauseris määratud URL-i. Kui soovite pärast allalaadimise lõppu midagi teha, saate allalaadimise käivitada Javascriptiga.

Selleks on palju võimalusi, kuid sel juhul kasutame , mis on ka XMLHttpRequest asünkroonse töötlemise päritolu. Võite kasutada ka jQuery ajaxi funktsioone või Fetch API-d.

ahref Allalaadimise URL kirjutatakse märgendisse ja id protsess käivitatakse, kui klõpsatakse seatud väärtuseledownload.

$('#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 Tavaliselt, kui jätate elemendi klõpsatuks, liigub vaikimisi allalaadimisprotsess, nii et e.preventDefault(); me kutsume vaikeprotsessi keelama.

href Hankige allalaadimise URL ja XMLHttpRequest GET seadistage see nii, et see hangiks .

XMLHttpRequest.responseTypeblob allalaaditavate binaarandmete juhendamiseks.

XMLHttpRequest.onload Kuna protsessi pärast andmete allalaadimise lõppu saab kirjeldada juhul, kui protsess pärast allalaadimise lõppu on siin kirjutatud. Kuna andmed on alla laaditud ainult kliendile, ei salvestata faili tegelikult kohapeal. Faili kohalikuks salvestamiseks võite lisada pseudoandmeid sisaldava sildi ja panna selle käituma nii, nagu a oleksite lingil klõpsanud ja faili salvestanud. Sel ajal window.URL.createObjectURL saab funktsiooni abil andmed URL-iks teisendada, nii et href saate need seadistada ja tööle panna.

Salvestatava failinime saab vastuse päisest alla laadida, kui see on serverist Content-Disposition vastusesse lisatud. Kuna selle omandamine on veidi keeruline, arvan, et koodi tuleks kasutada sellisena, nagu see on. Kui failinime pole serveris määratud, ei saa seda aidata, seega arvan, et see seatakse URL-i tee lõpus vaikefailinimele või failinimele.

Kuna seekord kuvan selle konsoolis alles pärast faili salvestamist, arvan, et soovitud toimingut saab teostada, kirjutades selle osa suvalise koodiga ümber.

Kui andmete allalaadimise protsess on kirjeldatud, on viimane asi, mida me tahame teha, helistada XMLHttpRequest.send funktsioonile, et päring tegelikult käivitada.

Käivitamise allalaadimise link

Mr./Ms. Code pakub linke faili otse allalaadimise mustrile ja selle Javascriptiga allalaadimise mustrile. a Võite kirjutada URL-i otse märgendisse href , kuid kui kirjutate ASP.NET Core'i järgmise, laieneb URL automaatselt href .

Habemenuga lehed : Lehed/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 : Vaated/Kodu/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>