أبسط طريقة:
<a href='url' download=filename.ext>تنزيل الملف</a>
إذا كان عنوان URL يشير إلى نفس المورد المصدر، فهذا أمر طبيعي.
إذا كان عنوان URL يشير إلى مورد جهة خارجية، فسيفشل التنزيل، وسيكون السلوك هو نفسه كما هو الحال عند عدم استخدام التنزيل - سيتم فتح الملفات التي يمكن فتحها بواسطة المتصفح مباشرة بواسطة المتصفح، والملفات التي لا يمكن فتحها سيتم فتحه وسيتم تنزيله مباشرة. يمكن تنزيل الملفات التي يفتحها المتصفح يدويًا.
الحل 1: قم بتعبئة الملف في ملف .zip/.rar الذي لا يمكن للمتصفح فتحه وقم بتنزيله.
الحل 2: من خلال إعادة التوجيه للواجهة الخلفية، تطلب الواجهة الخلفية موارد خارجية وتعيدها إلى الواجهة الأمامية. تستخدم الواجهة الأمامية أدوات مثل حافظة الملفات لحفظ الملف.
إذا تم تكوين مورد الجهة الخارجية المشار إليه بواسطة عنوان URL باستخدام CORS، فإن سمة التنزيل غير صالحة، ولكن يمكن الحصول على الملف وتنزيله محليًا، ولا يمكن تعديل اسم الملف.
2.الحل 1. استخدم HTML5 Blob لتنزيل ملفات المعلومات النصيةconst downloadRes = async (url, name) => { Let Response = انتظار الجلب (url) // تحويل المحتوى إلى عنوان blob Let blob = انتظار الاستجابة.blob() // إنشاء رابط مخفي قابل للتنزيل Let objectUrl = window. URL .createObjectURL(blob) Let a = document.createElement('a') //Address a.href = objectUrl // تعديل اسم الملف a.download = name // اضغط على زر التشغيل document.body.appendChild(a) a.click() //Remove setTimeout(() => document.body.removeChild(a), 1000)}2. تنسيق الصورة
إذا أردنا تنزيل صورة، فيمكننا تحويل الصورة إلى تنسيق base64 ثم تنزيلها.
```تصدير const downloadImg = async (url, name) => { var Canvas = document.createElement('canvas'), ctx = Canvas.getContext('2d'), img = new Image(); img.crossOrigin = 'مجهول'; img.onload = function() { Canvas.height = img.height; ctx.drawImage(img, 0, 0); var dataURL = Canvas.toDataURL('image/png'); Let a = document.createElement('a'); .body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); Canvas = null; }, 1000); }; img.src = url;};```
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.