Javascript, lai veiktu apstrādi pēc faila lejupielādes

Darbības verifikācijas vide

Visual Studio

• Visual Studio 2022

ASP.NET kodols

• 8.0 (Razpr lapas, MVC)

Tīmekļa pārlūkprogrammas

• Mala 119

Darbības vide

Visual Studio (ja iekļaujat arī servera programmas)

• Visual Studio 2022

ASP.NET Core (ja tas ietver arī servera programmas)

• 8.0 (Razpr lapas, MVC)

Tīmekļa pārlūkprogrammas

• Mala
• Google Chrome
• Citas pārlūkprogrammas (ne visas pārbaudītas)

(* Šī uzgaļa galvenais korpuss ir klienta puses process, tāpēc servera puse var būt jebkas)

Sākumā

Šo padomu galvenā uzmanība tiek pievērsta klienta programmai (Javascript), un servera programma ir paredzēta tikai failu lejupielādei. Tāpēc nav svarīgi, kāda ir servera programma, ja vien tā var likt jums lejupielādēt failu.

Lieciet lietotājiem lejupielādēt failus, kad tiem piekļūst serverī

Mr./Ms. ļauj jums lejupielādēt failus, kad saņemat pieprasījumu. Tajā laikā mēs apzināti gaidām noteiktu laiku serverī, lai būtu viegli saprast lejupielādes sākumu un beigas.

Lūk, kas notiek Razor Pages un MVC servera pusē: To var ieviest citos projektos, piemēram, tīmekļa API.

Skuvekļa lapas : Lapas/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");
    }
  }
}

Klientu apstrāde

Parasti jūs lejupielādējat failu, piekļūstot norādītajam URL tīmekļa pārlūkprogrammā. Ja vēlaties kaut ko darīt pēc lejupielādes pabeigšanas, varat palaist lejupielādi ar Javascript.

Ir daudz veidu, kā to izdarīt, bet šajā gadījumā mēs izmantosim , kas ir arī XMLHttpRequest asinhronās apstrādes izcelsme. Varat arī izmantot jQuery ajax funkcijas vai Fetch API.

ahref Lejupielādes URL tiek ierakstīts tagā, un id process tiek izpildīts, noklikšķinot uz iestatītā URLdownload.

$('#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 Parasti, ja atstājat elementu noklikšķināts, noklusējuma lejupielādes process pārvietosies, tāpēc e.preventDefault(); mēs aicinām atspējot noklusējuma procesu.

href Iegūstiet lejupielādes vietrādi URL no un XMLHttpRequest GET iestatiet to, lai to iegūtu no .

XMLHttpRequest.responseTypeblob dot norādījumu par lejupielādējamajiem binārajiem datiem.

XMLHttpRequest.onload Tā kā procesu pēc datu lejupielādes pabeigšanas var aprakstīt notikumā, process pēc lejupielādes pabeigšanas ir rakstīts šeit. Tā kā dati ir lejupielādēti tikai klientam, fails faktiski netiek saglabāts lokāli. Lai saglabātu failu lokāli, varat pievienot tagu, kas a satur pseidodatus, un likt tam darboties tā, it kā jūs būtu noklikšķinājis uz saites un saglabājis failu. Tajā laikā šī funkcija var window.URL.createObjectURL konvertēt datus vietrādī URL, lai href jūs varētu tos iestatīt un likt tiem darboties.

Saglabājamo faila nosaukumu var izgūt no atbildes galvenes, ja tas ir iekļauts atbildē no servera Content-Disposition . Tā kā to ir nedaudz sarežģīti iegūt, es domāju, ka kods ir jāizmanto tāds, kāds tas ir. Ja faila nosaukums serverī nav norādīts, to nevar palīdzēt, tāpēc es domāju, ka tas tiks iestatīts uz noklusējuma faila nosaukumu vai faila nosaukumu URL ceļa beigās.

Tā kā šoreiz es to parādu konsolē tikai pēc faila saglabāšanas, es domāju, ka vēlamo darbību var izpildīt, pārrakstot šo daļu ar patvaļīgu kodu.

Kad datu lejupielādes process ir aprakstīts, pēdējā lieta, ko mēs vēlamies darīt, ir XMLHttpRequest.send izsaukt funkciju, lai faktiski sāktu pieprasījumu.

Lejupielādes palaist saiti

Mr./Ms. Code nodrošina saites uz faila tiešas lejupielādes modeli un tā lejupielādes modeli, izmantojot Javascript. a Vietrādi URL varat rakstīt tieši tagā href , bet, ja programmā ASP.NET Core rakstāt tālāk norādīto informāciju, vietrādis URL tiks automātiski href izvērsts līdz .

Skuvekļa lapas : Lapas/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 : Skati/Sākums/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>