Ajax 下載檔案

第一篇博文，記錄ajax下載二進位制檔案的方法

laravel 返回響應

response($file)->header('Content-Type','application/octet-stream')；

前端 ajax請求

function loadeImg( name) {

    const url = ‘http://localhost/xxx’;

    const xhr = new XMLHttpRequest();

    xhr.open('POST', url, true);        // 定義請求方式

    xhr.setRequestHeader('X-CSRF-TOKEN',$('meta[name="csrf-token"]').attr('content'));  // 新增 csrf 令牌

    xhr.responseType = "blob";    // 返回型別blob

    // 定義請求完成的處理函式，請求前也可以增加載入框/禁用下載按鈕邏輯

    xhr.onload = function () {

        // 請求完成

        if (this.status === 200) {

            // 返回200

            const blob = this.response;

            const reader = new FileReader();

            reader.readAsDataURL(blob);    // 轉換為base64，可以直接放入a標籤href

            reader.onload = function (e) {

                // 轉換完成，建立一個a標籤用於下載

                const a = document.createElement('a');

                a.download = name + '.png';

                a.href = e.target.result;

                $("body").append(a);    // 修復firefox中無法觸發click

                a.click();

                $(a).remove();

            }

        }

    };

    // 傳送ajax請求

    xhr.send()
}

簡單記下