วิธีเดียวที่ฉันรู้คือเคล็ดลับที่ใช้โดยFileSaver.js :
- สร้าง
<a>
แท็กที่ซ่อนอยู่
- ตั้งค่า
href
แอตทริบิวต์เป็น URL ของ blob
- ตั้งค่า
download
คุณสมบัติเป็นชื่อไฟล์
- คลิกที่
<a>
แท็ก
นี่คือตัวอย่างที่ง่าย ( jsfiddle ):
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
var data = { x: 42, s: "hello, world", d: new Date() },
fileName = "my-download.json";
saveData(data, fileName);
ฉันเขียนตัวอย่างนี้เพื่ออธิบายแนวคิดในโค้ดการผลิตใช้ FileSaver.js แทน
หมายเหตุ
- เบราว์เซอร์รุ่นเก่าไม่รองรับแอตทริบิวต์ "ดาวน์โหลด" เนื่องจากเป็นส่วนหนึ่งของ HTML5
- รูปแบบไฟล์บางรูปแบบถือว่าเบราว์เซอร์ไม่ปลอดภัยและการดาวน์โหลดล้มเหลว การบันทึกไฟล์ JSON ด้วยส่วนขยาย txt นั้นใช้ได้สำหรับฉัน