بارگیری خودکار جاوااسکریپت
دسته بندی : آموزش Javascript سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 19 اسفند 1399در ادامه به مبحث بارگیری خودکار جاوااسکریپت می پردازیم.
بارگیری خودکار جاوااسکریپت چیست؟
بارگیری خودکار پرونده با جاوا اسکریپت روشی است که به شما امکان می دهد با اعلام عملکرد JavaScript ، مستقیماً پرونده را از URL بازیابی کنید.
این کار بدون ارسال درخواست اقدام به سرور انجام می شود. می توانید از این روش در مرورگرهایی که از HTML5 پشتیبانی می کنند استفاده کنید.
توجه: بارگیری های خودکار به شما امکان می دهد یک لینک بارگیری امن ایجاد کنید که از دیدن مسیر پرونده توسط کاربران جلوگیری می کند.
همچنین می توانید پیوند بارگیری را با تنظیم گذرواژه و تاریخ انقضا بر روی آن رمزگذاری کنید.
در گذشته ، مرورگرهای معروف به دلیل رعایت نکات ایمنی ، بارگیری خودکار را دشوار می کردند. با روش بارگیری HTML5 و JavaScript ، این دیگر مسئله ای نیست.
ساخت فایل های جاوا اسکریپت بدون سرور
در اینجا نحو برای بارگیری مستقیم یک فایل از مرورگرها وجود دارد:
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
document.getElementById("dwn-btn").addEventListener("click", function(){
// Start the download of yournewfile.txt file with the content from the text area
var text = document.getElementById("text-val").value;
var filename = "yournewfile.txt";
download(filename, text);
}, false);
این روش ساخت فایلهای بارگیری JavaScript به کاربران امکان می دهد محتوای ارائه شده در قسمت متن را بازیابی کنند. این فایل به صورت یک .txt ساده به دستگاه رایانه می رسد و در ویرایشگر متن استاندارد باز می شود.
تابع اعلام شده ویژگی بارگیری را در جایی تنظیم می کند که می خواهید فایل را نام ببرید. سپس تابع encodeURIComponent محتوا را کد می کند. روش کلیک باعث می شود با کلیک روی دکمه بارگیری ، روند بارگیری شروع شود.
استفاده از FileSaver.js
گزینه دیگری برای بارگیری پرونده ها بدون تماس با سرور وجود دارد. این بار ، ما از یک کتابخانه JavaScript به نام FileSaver.js استفاده می کنیم. مثال زیر نحو ارائه پیاده سازی رابط FileSaver saveAs را ارائه می دهد:
function download() {
var save = document.getElementById("example").value;
var blob = new Blob([save], {
type: "text/plain;charset=utf-8"
});
saveAs(blob, "yournewfile.txt");
}
توجه: این گزینه به شما امکان می دهد رابط saveAs () FileSaver را در مرورگرهایی که از آن پشتیبانی نمی کنند ، پیاده سازی کنید. این پرونده را روی مقدار Blob تنظیم می کند.
FileSaver.js به جای درگیر کردن در سمت سرور ، یک راه حل مناسب برای بارگیری پرونده ها در سمت سرویس گیرنده است. به عنوان مثال ، برای جلوگیری از ارسال اطلاعات حساس به سرورهای خارجی مفید است.
Blob چیست؟
Blob که مخفف Binary Large Object است ، داده هایی را نشان می دهد که از قالب بومی JavaScript پشتیبانی نمی کنند. این شامل اشیا mult چندرسانه ای ، برنامه ها و قطعه های کد است.
به یاد داشته باشید: از آنجا که Blob دارای محدودیت های اندازه بر اساس مرورگر پشتیبانی شده است ، FileSaver.js فقط برای پرونده های با اندازه کوچک یا متوسط (حداکثر 500-800 MiB) مناسب است.
برای بررسی سازگاری FileSaver.js در مرورگرهای مختلف به جدول زیر مراجعه کنید:
Dependencies | Max Blob Size | Filenames | Builds as | Browser |
None | 800 MiB | Yes | Blob | +Firefox 20 |
Blob.js | n/a | NO | data: URI | Firefox < 20 |
None | 500 MiB | Yes | Blob | Chrome |
None | 500 MiB | Yes | Blob | BlobChrome for Android |
None | Unknown | Yes | Blob | Edge |
None | MIB 600 | Yes | Blob | IE 10 |
None | 500 MiB | Yes | Blob | +Opera 15 |
Blob.js | n/a | NO | data: URI | +Opera < 15 |
None | Unknown | NO | Blob | +Safari 6.1 |
Blob.js | n/a | NO | data: URI | Safari < 6 |
قطعه کد زیر بررسی می کند که آیا مرورگر از اشیا Bl Blob پشتیبانی می کند:
try {
var isFileSaverSupported = !!new Blob;
} catch (e) {}
نکات مهم بارگیری خودکار جاوااسکریپت:
- در بعضی موارد ، کاربران Safari 6.1+ به جای بارگیری حباب ها ، آنها را باز می کنند. سپس ، آنها باید ترکیبی از؟ + S را در صفحه کلید آنها ذخیره کنید تا پرونده باز شده ذخیره شود.
- از آنجا که FileSaver.js فقط می تواند از پرونده های کوچک تا متوسط پشتیبانی کند ، می توانید از StreamSaver.js برای پرونده های بزرگ استفاده کنید.
این مقاله چقدر براتون مفید بود؟