ولكن نظرًا لحدود المتصفحات، لا يمكننا في كثير من الحالات سوى تقديم رابط والسماح للمستخدمين بالنقر عليه لفتحه -> حفظ باسم. مثل الرابط التالي :
انسخ رمز الكود كما يلي:
<a href="file.js">file.js</a>
عندما ينقر المستخدم على هذا الرابط، سيفتح المتصفح ويعرض محتوى الملف المشار إليه بواسطة الرابط. ومن الواضح أن هذا لا يلبي احتياجاتنا. يضيف HTML5 سمة تنزيل إلى العلامة a طالما أن هذه السمة موجودة، فعند النقر على الرابط، لن يفتح المتصفح الملف المشار إليه بواسطة الرابط، بل يقوم بتنزيله بدلاً من ذلك (مدعوم حاليًا فقط بواسطة Chrome وFirefox و. الأوبرا).
عند التنزيل، سيتم استخدام اسم الرابط مباشرة كاسم الملف، ولكن يمكن تغييره، فقط قم بإضافة اسم الملف المطلوب للتنزيل، مثل: download="not-a-file.js".
لكن هذا لا يكفي، الطريقة المذكورة أعلاه مناسبة للاستخدام فقط عندما يكون الملف موجودًا على الخادم. ماذا لو كنت تريد من المتصفح تنزيل المحتوى الذي تم إنشاؤه بواسطة js على جانب المتصفح؟
في الواقع، لا تزال هناك طريقة للقيام بذلك، وأعتقد أن الكثير من الناس قد سمعوا عن كلمة DataURI، والأكثر شيوعًا هو src الخاص بالصورة.
انسخ رمز الكود كما يلي:
<img src="data:image/gif;base64,R0lGOXXXXX">
يمكن نقل شرح DataURI هنا، ولن أشرحه هنا.
إذن، يوجد الآن قانون يجب اتباعه عند تنزيل المحتوى الذي تم إنشاؤه بواسطة js. مغلفة بطريقة على النحو التالي:
انسخ رمز الكود كما يلي:
وظيفة downloadFile(aLink، fileName، content){
aLink.download = fileName;
aLink.href = "بيانات:نص/عادي،" + محتوى؛
}
بعد استدعاء downloadFile، ينقر المستخدم على الرابط لبدء تنزيل المتصفح.
ومع ذلك، فإن الطريقة المذكورة أعلاه لا تكفي، فهي تعاني من عيبين، مما سيؤدي إلى فقدان العديد من الفتيات الكسالى:
هناك قيود على أنواع الملفات التي يمكن تنزيلها. ماذا علي أن أفعل إذا أردت تنزيل الصور المعالجة؟
يجب عليك النقر مرة أخرى للتنزيل، وهو أمر مزعج للغاية.
لحل مشكلة نوع الملف، يمكنك استخدام واجهة برمجة التطبيقات الجديدة للمتصفح (URL.createObjectURL) لحل المشكلة، وعادةً ما يتم استخدام URL.createObjectURL لإنشاء DataURI للصورة لعرض الصورة ودع المتصفح يساعدنا في تحديد نوع الملف.
معلمة URL.createObjectURL هي كائن ملف أو كائن Blob. كائن الملف هو الملف المحدد من خلال الإدخال[نوع=ملف]. كائن Blob هو كائن ثنائي كبير للحصول على وصف تفصيلي، يرجى الرجوع هنا.
الآن، نحتاج فقط إلى إنشاء ObjectURL مع المحتوى وتعيينه إلى رابط لحل مشكلة تقييد نوع الملف.
يعد التنزيل التلقائي للملفات أمرًا سهلاً للغاية أيضًا. يمكنك إنشاء حدث نقر على واجهة المستخدم بنفسك ثم تشغيله تلقائيًا لتحقيق التنزيل التلقائي.
الآن دعونا نلقي نظرة على الكود النهائي:
انسخ رمز الكود كما يلي:
وظيفة تنزيل الملف (اسم الملف، المحتوى) {
var aLink = document.createElement('a');
var blob = new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent بدون المعلمتين الأخيرتين سيبلغ عن خطأ ضمن FF، شكرًا لـ Barret Lee على التعليقات.
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
الآن، بمجرد استدعاء ملف downloadFile، سيتم تنزيل الملف تلقائيًا، أليس كذلك ^_^؟
ملاحظة: حاليًا (2014-01) لم يعد Blob وURL.createObjectURL بحاجة إلى إضافة بادئات خاصة في المتصفحات القياسية، لذلك يمكنك استخدامها بثقة ~~ إذا كنت قلقًا، فيمكنك التحقق من هل يمكنني استخدامها.