แต่ถูกจำกัดโดยเบราว์เซอร์ ในหลายกรณีเราทำได้แค่ให้ลิงก์และให้ผู้ใช้คลิกเพื่อเปิด -> บันทึกเป็น เช่นลิงค์ต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<a href="file.js">file.js</a>
เมื่อผู้ใช้คลิกลิงก์นี้ เบราว์เซอร์จะเปิดขึ้นและแสดงเนื้อหาของไฟล์ที่ลิงก์ชี้ไป แน่นอนว่าไม่ตรงกับความต้องการของเรา HTML5 เพิ่มแอตทริบิวต์การดาวน์โหลดให้กับแท็ก ตราบใดที่มีแอตทริบิวต์นี้อยู่ เมื่อมีการคลิกลิงก์ เบราว์เซอร์จะไม่เปิดไฟล์ที่ลิงก์ชี้ไป แต่จะดาวน์โหลดแทน (ปัจจุบันรองรับเฉพาะ Chrome, Firefox และ โอเปร่า)
เมื่อดาวน์โหลด ชื่อของลิงค์จะถูกใช้เป็นชื่อไฟล์โดยตรงแต่สามารถเปลี่ยนแปลงได้ เพียงเพิ่มชื่อไฟล์ที่ต้องการเพื่อดาวน์โหลด เช่น: download="not-a-file.js"
แต่นี่ยังไม่เพียงพอ วิธีการข้างต้นเหมาะสำหรับใช้เมื่อไฟล์อยู่บนเซิร์ฟเวอร์เท่านั้น จะทำอย่างไรถ้าคุณต้องการให้เบราว์เซอร์ดาวน์โหลดเนื้อหาที่สร้างโดย js ทางฝั่งเบราว์เซอร์?
จริงๆ แล้วยังมีวิธีทำอยู่ ผมเชื่อว่าหลายๆ คนคงเคยได้ยินคำว่า DataURI กันมาแล้ว แต่คำที่พบบ่อยกว่านั้นคือ src ของรูปภาพ เช่น:
คัดลอกรหัสรหัสดังต่อไปนี้:
<img src="data:image/gif;base64,R0lGOXXXX">
คำอธิบายของ DataURI สามารถย้ายมาที่นี่ได้ ฉันจะไม่อธิบายไว้ที่นี่
ตอนนี้จึงมีกฎหมายที่ต้องปฏิบัติตามเมื่อดาวน์โหลดเนื้อหาที่สร้างโดย js สรุปเป็นวิธีการดังนี้
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่นดาวน์โหลดไฟล์ (aLink, ชื่อไฟล์, เนื้อหา) {
aLink.download = ชื่อไฟล์;
aLink.href = "data:ข้อความ/ธรรมดา" + เนื้อหา;
-
หลังจากเรียก downloadFile แล้ว ผู้ใช้จะคลิกลิงก์เพื่อทริกเกอร์การดาวน์โหลดเบราว์เซอร์
อย่างไรก็ตาม วิธีการดังกล่าวยังไม่เพียงพอ
มีข้อจำกัดเกี่ยวกับประเภทไฟล์ที่สามารถดาวน์โหลดได้ ฉันควรทำอย่างไรหากต้องการดาวน์โหลดภาพที่ประมวลผลแล้ว?
คุณต้องคลิกอีกครั้งเพื่อดาวน์โหลด ซึ่งยุ่งยากเกินไป
เพื่อแก้ไขปัญหาประเภทไฟล์ คุณสามารถใช้ API ใหม่ของเบราว์เซอร์ (URL.createObjectURL) เพื่อแก้ไขปัญหา โดยปกติแล้ว URL.createObjectURL จะใช้เพื่อสร้าง DataURI ของรูปภาพเพื่อแสดงรูปภาพ และให้เบราว์เซอร์ช่วยเรากำหนดประเภทไฟล์
พารามิเตอร์ของ URL.createObjectURL คือออบเจ็กต์ไฟล์หรือออบเจ็กต์ Blob โปรดดูคำอธิบายโดยละเอียดที่นี่
ตอนนี้ เราเพียงแต่ต้องสร้าง ObjectURL ที่มีเนื้อหาและกำหนดให้กับ aLink เพื่อแก้ไขปัญหาข้อจำกัดประเภทไฟล์
การดาวน์โหลดไฟล์อัตโนมัติก็ค่อนข้างง่ายเช่นกัน คุณสามารถสร้างเหตุการณ์การคลิก UI ได้ด้วยตัวเอง จากนั้นทริกเกอร์โดยอัตโนมัติเพื่อให้ได้รับการดาวน์โหลดอัตโนมัติ
ตอนนี้เรามาดูโค้ดสุดท้ายกัน:
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่นดาวน์โหลดไฟล์ (ชื่อไฟล์, เนื้อหา) {
var aLink = document.createElement('a');
var blob = new Blob([เนื้อหา]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent ที่ไม่มีพารามิเตอร์สองตัวสุดท้ายจะรายงานข้อผิดพลาดภายใต้ FF ขอบคุณ Barret Lee สำหรับคำติชม
aLink.download = ชื่อไฟล์;
aLink.href = URL.createObjectURL(หยด);
aLink.dispatchEvent(evt);
-
ตอนนี้ทันทีที่เรียก downloadFile ไฟล์ก็จะถูกดาวน์โหลดโดยอัตโนมัติ เยี่ยมเลย ^_^
หมายเหตุ: ปัจจุบัน (2014-01) Blob และ URL.createObjectURL ไม่จำเป็นต้องเพิ่มคำนำหน้าส่วนตัวในเบราว์เซอร์มาตรฐานอีกต่อไป ดังนั้นคุณจึงสามารถใช้งานได้อย่างมั่นใจ~~ หากคุณกังวล คุณสามารถตรวจสอบ ฉันสามารถใช้ได้