วิธีที่ง่ายที่สุด:
<a href='url' download=filename.ext>ดาวน์โหลดไฟล์</a>
หาก URL ชี้ไปยังทรัพยากรต้นทางเดียวกัน นั่นเป็นเรื่องปกติ
หาก URL ชี้ไปที่ทรัพยากรของบุคคลที่สาม การดาวน์โหลดจะล้มเหลว และลักษณะการทำงานจะเหมือนกับเมื่อไม่ได้ใช้งานการดาวน์โหลด - ไฟล์ที่เบราว์เซอร์สามารถเปิดได้จะถูกเปิดโดยเบราว์เซอร์โดยตรง และไฟล์ที่ไม่สามารถเปิดได้ จะถูกเปิดจะถูกดาวน์โหลดโดยตรง ไฟล์ที่เปิดโดยเบราว์เซอร์สามารถดาวน์โหลดได้ด้วยตนเอง
โซลูชันที่ 1: แพ็คไฟล์เป็นไฟล์ .zip/.rar ที่เบราว์เซอร์ไม่สามารถเปิดได้และดาวน์โหลดได้
โซลูชันที่ 2: ผ่านการส่งต่อแบ็คเอนด์ แบ็คเอนด์จะร้องขอทรัพยากรจากบุคคลที่สามและส่งกลับไปยังส่วนหน้า
หากทรัพยากรของบริษัทอื่นที่ URL ชี้ไปได้รับการกำหนดค่าด้วย CORS แอตทริบิวต์การดาวน์โหลดจะไม่ถูกต้อง แต่สามารถรับและดาวน์โหลดไฟล์ในเครื่องได้ และชื่อไฟล์ไม่สามารถแก้ไขได้
2.โซลูชั่น 1. ใช้ HTML5 Blob เพื่อดาวน์โหลดไฟล์ข้อมูลข้อความ const downloadRes = async (url, name) => { la response = await fetch(url) // แปลงเนื้อหาเป็นที่อยู่ blob ให้ blob = await response.blob() // สร้างลิงก์ดาวน์โหลดที่ซ่อนอยู่ ให้ objectUrl = window URL .createObjectURL(blob) ให้ a = document.createElement('a') //ที่อยู่ a.href = objectUrl //แก้ไขชื่อไฟล์ a.download = name // ทริกเกอร์คลิก document.body.appendChild(a) a.click() // ลบ setTimeout(() => document.body.removeChild(a), 1,000)} 2. รูปแบบรูปภาพหากเราต้องการดาวน์โหลดรูปภาพ เราสามารถแปลงรูปภาพเป็นรูปแบบ base64 แล้วจึงดาวน์โหลดได้
```ส่งออก const downloadImg = async (url, ชื่อ) => { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = รูปภาพใหม่(); img.crossOrigin = 'ไม่ระบุชื่อ'; img.onload = function() { canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL('image/png'); ให้ a = document.createElement('a'); a.href = dataURL; a.download = ชื่อ; .body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); canvas = null; }, 1,000); }; img.src = url;};```ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network