Download file bằng XHR request
TIL
487
Javascript
199
White

Hoàng Duy viết ngày 16/06/2016

Hoàn cảnh

Có một link A nào đó mà content của nó là file, muốn download file đó khi click link thì chỉ việc thêm attribute download với giá trị là tên file vào thẻ a. Ví dụ

<a href="link-to-file" download="filename.ext">Download</a>

Tuy nhiên một số server yêu cầu request để lấy file phải được authorize, tức là có header gì đấy, mà việc thêm header vào request tạo ra khi click link thì chịu, tớ đếch biết, ai biết bảo tớ với. Thế nên phải construct một cái XHR request để thỏa sức thay đổi header các thứ. Sau đấy tạo file bằng Javascript và nhét cái nội dung response vào.

Vấn đề nữa là File constructorFile System API chưa hỗ trợ tốt trên các trình duyệt. Walkthrough bằng cách dùng Blob constructor sau đó tạo một phần tử anchor in memory và trigger click lên nó

Code

function download(url: string, mime: string, filename: string) {
        let promise = new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest()

            xhr.onload = () => {
                let blob = new Blob([xhr.response], { type: mime })
                let href = URL.createObjectURL(blob)
                let a = document.createElement('a') as HTMLAnchorElement
                a.href = href
                console.log(href)
                a.setAttribute('download', filename)
                a.click()
                URL.revokeObjectURL(href)
                resolve()
            }

            xhr.onerror = (err) => {
                reject(err)
            }

            xhr.open('GET', this.baseUrl + url)

            // set header các thứ
            xhr.setRequestHeader('Authorization', 'Bearer ' + token)
            xhr.responseType = 'blob'
            xhr.send()
        })

        return promise
}

URL.createObjectURLURL.revokeObjectURL đã kể ở đây

mahpahh 16-06-2016

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hoàng Duy

24 bài viết.
54 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
39 8
Xin chào, đây là lần đầu tiên mình post bài ở đây. Nhiều vấn đề mình cũng không rành lắm, có gì sai mọi người góp ý nhé. Xin cảm ơn :D Bài này gi...
Hoàng Duy viết hơn 2 năm trước
39 8
White
30 3
Đây là một trong các concept mới đối tượng mới được đưa vào ECMAScript 6. Việc sử dụng chúng rất dễ nhưng để hiểu được thì (đối với tôi) cũng cần k...
Hoàng Duy viết hơn 2 năm trước
30 3
White
21 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
21 8
Bài viết liên quan
White
18 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết hơn 1 năm trước
18 1
White
1 1
Chào mọi người, hôm nay mình viết một bài TIL nhỏ về cách lấy độ phân giải của màn hình hiện tại đang sử dụng. xdpyinfo | grep dimensions Kết quả...
namtx viết 7 tháng trước
1 1
White
8 0
Lấy fake path của file trong html input Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview. GIải pháp đầu: Dùng (Link) đọc file ảnh thành ba...
Hoàng Duy viết gần 2 năm trước
8 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
24 bài viết.
54 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!