download file ใน vue.js

VueJS

Created At : 2023-09-04 00:57

Views 👀 :

ใน Vue.js, คุณสามารถใช้ JavaScript เพื่อสร้างการดาวน์โหลดไฟล์ให้กับผู้ใช้ นี่คือตัวอย่างวิธีการสร้างการดาวน์โหลดไฟล์ใน Vue.js:

สร้างแบบบิวต์ไฟล์:
- ให้คุณสร้างแบบบิวต์ไฟล์ (Blob) จากข้อมูลที่คุณต้องการให้ผู้ใช้ดาวน์โหลด และกำหนดประเภทของไฟล์ (MIME type).
1
2
const data = "ข้อมูลที่คุณต้องการให้ดาวน์โหลด";
const blob = new Blob([data], { type: "application/octet-stream" });
สร้าง URL สำหรับ Blob:
- หลังจากสร้าง Blob คุณสามารถสร้าง URL สำหรับ Blob โดยใช้ URL.createObjectURL().
1
const url = URL.createObjectURL(blob);
สร้างลิงก์ดาวน์โหลด:
- ให้คุณสร้างลิงก์ (link) ใน HTML เพื่อให้ผู้ใช้คลิกและดาวน์โหลดไฟล์.
1
2
3
4
5
<template>
<div>
<a :href="downloadUrl" download="ชื่อไฟล์.txt">ดาวน์โหลดไฟล์</a>
</div>
</template>
ล้าง URL หลังจากใช้งาน:
- เมื่อผู้ใช้ดาวน์โหลดไฟล์, คุณควรล้าง URL ที่สร้างขึ้นในบันทึกเมื่อไม่ได้ใช้งานอีกต่อไป เพื่อป้องกันการหลุดหน่วยความจำ.
1
URL.revokeObjectURL(url);

นี่คือตัวอย่างโค้ด Vue.js ที่ใช้สร้างการดาวน์โหลดไฟล์:

<template>
  <div>
    <a :href="downloadUrl" download="example.txt">ดาวน์โหลดไฟล์</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      downloadUrl: ""
    };
  },
  mounted() {
    // สร้าง Blob จากข้อมูล
    const data = "ข้อมูลตัวอย่างสำหรับไฟล์ดาวน์โหลด";
    const blob = new Blob([data], { type: "application/octet-stream" });

    // สร้าง URL สำหรับ Blob
    this.downloadUrl = URL.createObjectURL(blob);
  },
  beforeDestroy() {
    // ล้าง URL เมื่อไม่ใช้งาน
    URL.revokeObjectURL(this.downloadUrl);
  }
};
</script>

ในตัวอย่างนี้, เราสร้าง Blob จากข้อมูลตัวอย่างและสร้าง URL สำหรับ Blob ใน mounted และล้าง URL ใน beforeDestroy. ผู้ใช้จะสามารถคลิกลิงก์ “ดาวน์โหลดไฟล์” เพื่อดาวน์โหลดไฟล์ที่มีข้อมูลตัวอย่างที่เราสร้างขึ้น.