CodeStar Academy
  • Trang chủ
  • Khóa học
  • Lịch khai giảng
  • Blog
  • Liên hệ
    • Trang chủ
    • Khóa học
    • Lịch khai giảng
    • Blog
    • Liên hệ

    Down load file trong vuejs

    • March 30, 2021
    • Posted by: Nhung Nguyen
    • Category: Uncategorized
    No Comments

    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

    Leave a Reply Cancel reply

    Về chúng tôi

    CodeStar hướng đến việc mang lại những trải nghiệm mới cho Học viên trong mỗi buổi học thông qua việc tham gia vào các dự án tại CodeStar

    Địa chỉ

    Tầng 4, Tòa CT1, Bắc Hà C14, Tố Hữu, Trung Văn, Nam Từ Liêm, Hà Nội.

    0865183328

    [email protected]

    Quick Links

    Khóa học

    Lịch khai giảng

    Kênh Youtube

    Liên hệ


    Copyright © 2020. CodeStar

    Search