فائل ڈاؤن لوڈ کرنے کے بعد پروسیسنگ انجام دینے کے لئے جاوا اسکرپٹ

آپریشن تصدیق کا ماحول

Visual Studio

• Visual Studio 2022

ASP.NET کور

• 8.0 (رازپر پیجز، ایم وی سی)

ویب Browsers

• Edge 119

آپریٹنگ ماحول

بصری اسٹوڈیو (اگر آپ بھی سرور پروگرام شامل کرتے ہیں)

• Visual Studio 2022

ASP.NET کور (اگر اس میں سرور پروگرام بھی شامل ہیں)

• 8.0 (رازپر پیجز، ایم وی سی)

ویب Browsers

• کنارہ
• گوگل کروم
• دوسرے براؤزر (تمام چیک نہیں)

(* اس ٹپ کا بنیادی جسم کلائنٹ سائیڈ پروسیس ہے ، لہذا سرور سائیڈ کچھ بھی ہوسکتا ہے)

سب سے پہلے

ان تجاویز کی بنیادی توجہ کلائنٹ پروگرام (جاوا اسکرپٹ) ہے ، اور سرور پروگرام صرف فائلوں کو ڈاؤن لوڈ کرنے کے لئے موجود ہے۔ لہذا ، اس سے کوئی فرق نہیں پڑتا ہے کہ سرور پروگرام کیا ہے ، جب تک کہ یہ آپ کو فائل ڈاؤن لوڈ کرنے پر مجبور کرسکتا ہے۔

صارفین کو سرور پر رسائی حاصل کرنے پر فائلیں ڈاؤن لوڈ کریں

جب آپ کو درخواست موصول ہوتی ہے تو مسٹر / مس آپ کو فائلیں ڈاؤن لوڈ کرنے کی اجازت دیتا ہے۔ اس وقت ، ہم جان بوجھ کر سرور پر ایک خاص وقت کا انتظار کرتے ہیں تاکہ ڈاؤن لوڈ کے آغاز اور اختتام کو سمجھنا آسان ہو۔

ریزر پیجز اور ایم وی سی کے سرور سائیڈ پر کیا ہوتا ہے: آپ اسے دوسرے منصوبوں میں لاگو کرسکتے ہیں ، جیسے ویب اے پی آئی۔

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

ایم وی سی: کولٹولز/ 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");
    }
  }
}

کلائنٹ پروسیسنگ

عام طور پر ، آپ ویب براؤزر میں مخصوص یو آر ایل تک رسائی حاصل کرکے فائل ڈاؤن لوڈ کرتے ہیں۔ اگر آپ ڈاؤن لوڈ مکمل ہونے کے بعد کچھ کرنا چاہتے ہیں تو ، آپ جاوا اسکرپٹ کے ساتھ ڈاؤن لوڈ چلا سکتے ہیں۔

ایسا کرنے کے بہت سے طریقے ہیں ، لیکن اس معاملے میں ، ہم استعمال کریں گے ، جو ایسنکرونس پروسیسنگ کی اصل بھی XMLHttpRequest ہے۔ آپ جے کوری اجیکس فنکشنز یا فیچ اے پی آئی بھی استعمال کرسکتے ہیں۔

ahref ڈاؤن لوڈ یو آر ایل ٹیگ میں لکھا جاتا ہے اور 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 ڈاؤن لوڈ یو آر ایل حاصل کریں اور XMLHttpRequest GET اسے حاصل کرنے کے لئے سیٹ کریں۔

XMLHttpRequest.responseTypeblob بائنری ڈیٹا کو ڈاؤن لوڈ کرنے کی ہدایت کرنے کے لئے.

XMLHttpRequest.onload چونکہ ڈیٹا ڈاؤن لوڈ مکمل ہونے کے بعد عمل کو واقعہ میں بیان کیا جاسکتا ہے ، لہذا ڈاؤن لوڈ مکمل ہونے کے بعد کا عمل یہاں لکھا گیا ہے۔ چونکہ ڈیٹا صرف کلائنٹ کو ڈاؤن لوڈ کیا گیا ہے ، لہذا فائل اصل میں مقامی طور پر محفوظ نہیں ہے۔ کسی فائل کو مقامی طور پر محفوظ کرنے کے لئے ، آپ ایک ٹیگ شامل کرسکتے ہیں جس میں جعلی ڈیٹا ہوتا ہے a اور اسے اس طرح برتاؤ کرسکتے ہیں جیسے آپ نے کسی لنک پر کلک کیا ہو اور فائل کو محفوظ کیا ہو۔ اس وقت کے ڈیٹا کو فنکشن کے ذریعہ یو آر ایل میں تبدیل کیا جاسکتا window.URL.createObjectURL ہے ، لہذا href آپ اسے سیٹ کرسکتے ہیں اور اسے کام کرسکتے ہیں۔

محفوظ کی جانے والی فائل کا نام جوابی ہیڈر سے بازیافت کیا جاسکتا ہے اگر یہ سرور سے Content-Disposition جواب میں شامل ہے۔ چونکہ یہ حاصل کرنے کے لئے تھوڑا سا پیچیدہ ہے ، مجھے لگتا ہے کہ کوڈ کو اسی طرح استعمال کیا جانا چاہئے جیسے یہ ہے۔ اگر سرور پر فائل کا نام واضح نہیں ہے تو ، اس کی مدد نہیں کی جاسکتی ہے ، لہذا مجھے لگتا ہے کہ یہ یو آر ایل راستے کے آخر میں پہلے سے طے شدہ فائل کے نام یا فائل کے نام پر سیٹ ہوجائے گا۔

چونکہ اس بار میں فائل کو محفوظ کرنے کے بعد ہی اسے کنسول میں ظاہر کرتا ہوں ، مجھے لگتا ہے کہ من مانی کوڈ کے ساتھ اس حصے کو دوبارہ لکھ کر مطلوبہ آپریشن انجام دیا جاسکتا ہے۔

ایک بار ڈیٹا ڈاؤن لوڈ کے عمل کو بیان کرنے کے بعد ، آخری چیز جو ہم کرنا چاہتے ہیں وہ اصل میں درخواست شروع کرنے کے لئے کسی فنکشن کو کال کرنا ہے XMLHttpRequest.send ۔

رن لنک ڈاؤن لوڈ کریں

مسٹر / مس کوڈ فائل کو براہ راست ڈاؤن لوڈ کرنے کے پیٹرن اور جاوا اسکرپٹ کے ساتھ اسے ڈاؤن لوڈ کرنے کے پیٹرن کے لنکس فراہم کرتا ہے۔ a آپ براہ راست ٹیگ میں یو آر ایل لکھ سکتے href ہیں ، لیکن اگر آپ مندرجہ ذیل ASP.NET کور میں لکھتے ہیں تو ، یو آر ایل خود بخود href پھیل جائے گا۔

ریزر صفحات : 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>

ایم وی سی: ویوز/ہوم/انڈیکس.سی ایچ ٹی ایم ایل

<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>