جاوا اسکریپت برای انجام پردازش پس از دانلود یک فایل

محیط تایید عملیات

ویژوال استودیو

• ویژوال استودیو 2022

ASP.NET هسته

• 8.0 (صفحات Razpr، MVC)

مرورگرهای وب

• لبه 119

محیط عملیاتی

ویژوال استودیو (اگر شما همچنین شامل برنامه های سرور)

• ویژوال استودیو 2022

ASP.NET هسته (اگر ان را نیز شامل برنامه های سرور)

• 8.0 (صفحات Razpr، MVC)

مرورگرهای وب

• لبه
• گوگل کروم
• مرورگرهای دیگر (نه همه بررسی شده)

(* بدنه اصلی این نکته فرایند سمت مشتری است، بنابراین سمت سرور می تواند هر چیزی باشد)

در ابتدا

تمرکز اصلی این نکات برنامه مشتری (Javascript) است و برنامه سرور فقط برای دانلود فایل ها وجود دارد. بنابراین، مهم نیست که برنامه سرور چیست، تا زمانی که بتواند فایل را دانلود کند.

کاربران فایل ها را هنگام دسترسی به سرور بارگیری می کنند

اقای / خانم اجازه می دهد تا شما را به دانلود فایل های زمانی که شما یک درخواست دریافت. در ان زمان، ما عمدا برای مقدار مشخصی از زمان در سرور صبر کنید به طوری که ان را اسان به درک شروع و پایان دانلود.

در اینجا چیزی است که در سمت سرور Razor Pages و MVC اتفاق می افتد: شما می توانید ان را در پروژه های دیگر مانند Web API اجرا کنید.

صفحه تیغ : صفحات / 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");
    }
  }
}

پردازش مشتری

به طور معمول، شما یک فایل را با دسترسی به یک URL مشخص در یک مرورگر وب دانلود می کنید. اگر می خواهید کاری را پس از اتمام دانلود انجام دهید، می توانید دانلود را با جاوا اسکریپت اجرا کنید.

راه های زیادی برای انجام این کار وجود دارد، اما در این مورد، ما از ان استفاده خواهیم کرد که همچنین XMLHttpRequest منشا پردازش ناهمزمان است. شما همچنین می توانید از توابع ajax jQuery یا Fetch API استفاده کنید.

ahref URL دانلود در برچسب نوشته شده است و id فرایند اجرا می شود زمانی که یک مجموعه به 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 به طور معمول، اگر عنصر را کلیک کنید، فرایند دانلود پیش فرض حرکت می کند، بنابراین e.preventDefault(); ما تماس می گیریم تا فرایند پیش فرض را غیرفعال کنیم.

href دریافت URL دانلود از و XMLHttpRequest GET تنظیم ان را به ان را از.

XMLHttpRequest.responseTypeblob برای اموزش داده های باینری به دانلود شود.

XMLHttpRequest.onload از انجا که فرایند پس از دانلود داده ها تکمیل می شود را می توان در این رویداد توصیف کرد، فرایند پس از اتمام دانلود در اینجا نوشته شده است. از انجا که داده ها فقط به مشتری دانلود شده اند، فایل در واقع به صورت محلی ذخیره نمی شود. برای ذخیره یک فایل به صورت محلی، می توانید یک برچسب حاوی شبه داده ها اضافه کنید و ان را طوری رفتار کنید که a انگار روی یک لینک کلیک کرده اید و فایل را ذخیره کرده اید. داده ها در ان زمان می توانند window.URL.createObjectURL توسط تابع به یک URL تبدیل شوند، بنابراین href می توانید ان را تنظیم کنید و ان را کار کنید.

نام فایل ذخیره شده را می توان از هدر پاسخ بازیابی اگر ان را در پاسخ از سرور گنجانده شده Content-Disposition است. از انجا که به دست اوردن ان کمی پیچیده است، من فکر می کنم که کد باید همانطور که هست استفاده شود. اگر نام فایل بر روی سرور مشخص نشده باشد، نمی توان به ان کمک کرد، بنابراین من فکر می کنم که ان را به نام فایل پیش فرض یا نام فایل در انتهای مسیر URL تنظیم می شود.

از انجا که این بار من فقط ان را در کنسول پس از ذخیره فایل نمایش می دهم، فکر می کنم که عملیات مورد نظر را می توان با بازنویسی این بخش با کد دلخواه اجرا کرد.

هنگامی که فرایند دانلود داده ها توصیف می شود، اخرین چیزی که ما می خواهیم انجام دهیم این است که XMLHttpRequest.send یک تابع را برای شروع درخواست فراخوانی کنیم.

دانلود پیوند اجرا

اقای / خانم کد فراهم می کند لینک به الگوی دانلود فایل به طور مستقیم و الگوی دانلود ان را با جاوا اسکریپت. a شما می توانید URL را مستقیما در href برچسب بنویسید، اما اگر موارد زیر را در core ASP.NET بنویسید، URL به طور خودکار href به .

صفحه تیغی : صفحات /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 : نمایش ها/صفحه اصلی/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>