Down load file trong vuejs

Mở đầu

Bình thường theo cách truyền thông nếu muốn download file thì chỉ cần response kiểu dữ liệu file trong header trước khi trả về browser là xong. Đây là cách khá quen thuộc. Vậy nếu dùng vuejs, angular, hay react muốn down load file thì làm thế nào .

Cách down load file bằng vuejs

Template

 <a
  :href="item.url"
  v-text="item.label"
  @click.prevent="downloadItem(item)" />

Vue component

 methods: {
  downloadItem ({ url, label }) {
    Axios.get(url, { responseType: 'blob' })
      .then(response => {
        const blob = new Blob([response.data], { type: 'application/pdf' })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = label
        link.click()
        URL.revokeObjectURL(link.href) // chỗ này revoke cũng được hoặc remove luôn link đi nhé. dùng link.remove(). Tuy nhiên nếu dùng remove cần dùng hàm timemout nhé vì trên một số browser remove ngay có thể gây lỗi. 
      }).catch(console.error)
  }
}

Lỗi down nhiều file đồng thời trên trình duyệt safari

Giả sử link trên nếu click thay vì down load một file mà cần download nhiều file nhưng lại không dùng hàm zip để nén lại thành 1 file. Nếu event link.click diễn ra đồng thời thì có thể 1 file ko thể download được.

Vì vậy cần dùng hàm settimeout để tách thời điểm link.click ra nhé nếu không sẽ bị lỗi trên trình duyệt safari