導出功能實現，js獲取二進制流數據保存

獲取excel文件簡單版（vue寫法）：

思路：前端實例a標簽直接請求后端接口下載文件

缺點：1.后端報錯沒有明確得前端提示  2. 比較單一得，命名是寫死的  3. 只能用於簡單的下載文件，不適合給客戶用

寫法：

 

 

 

 

 

 

 

復雜版（jquery寫法） // 獲取流數據不直接通過a標簽，但是獲取到會通過a標簽下載到本地：

通過篩選條件，提取二進制流數據，驗證成功返回流數據，驗證失敗返回字典進行前端提示。

 

好處：

1. 適合對外使用，后端報錯可以進行提示

2. 比較靈活，命名也可以是后端命名，這樣返回的文件類型就多了~ 

 

前端JS寫法：

# 通過狀態碼區分成功或失敗，200成功，其它都為失敗，把流數據轉換成json數據，json數據在反解，給用戶做提示

    function extract_btn_click(){
        $('#extract').click(function () {
            // 拿到數據
            var data = {};
            $('#extract_form input').each(
                function (i,v){   // i為索引，v為元素
                    var key = $(v).attr("name");
                    data[key] = $(v).val();
                }
            );
            var begin_time = data.begin_time;
            var end_time = data.end_time;
            delete data.begin_time;
            delete data.end_time;
            data["beginDate"] = begin_time.split('T')[0];
            data["beginTime"] = begin_time.split('T')[1] + ':00';
            data["endDate"] = end_time.split('T')[0];
            data["endTime"] = end_time.split('T')[1] + ':00';
            // 保存的文件名
            var file_name = `${data.group_name}-${data.storefront_name}-${data.beginDate}至${data.endDate}`;
            // 轉換成json數據發送至后端
            data = JSON.stringify(data);
            // 提示
            alert(`開始提取 ${file_name} POS數據.`);

            // 獲取報表二進制數據
            var xhr = new XMLHttpRequest();
            xhr.open('post',  '/v1/api/report/extract/?opt=pos');
            xhr.responseType = 'blob';  // 重點
            xhr.send(data);
            // 傳輸完畢的回調
            xhr.onload = function () {
                if (xhr.status === 200){
                    var data = new Blob([xhr.response]);
　　　　　　　　　　　　// 通過a標簽把內容下載到本地
                    var obj = window.URL.createObjectURL(data);
                    var a = document.createElement('a');
                    a.download = `${file_name}.xls`;
                    a.href = obj;
                    a.click();
                    // 下載完畢，釋放
                    a.onload = function(){
                        window.URL.revokeObjectURL(obj);
                    };
                }else{
                    const tempBlob = new Blob([xhr.response], {type: 'application/json'});
                    // 通過 FileReader 讀取這個 blob
                    const reader = new FileReader();
                    reader.readAsText(tempBlob);
                    reader.onload = e => {
                        const res = e.target.result;
                        const data = JSON.parse(res);
                        alert(data["message"]);
                    };

                }

            }

        })
    }

# 使用的XMLHttpRequest，使用過ajax但是保存excel數據，打開有問題

 

后端Django寫法：

def report_extract(req):
    opt = req.GET.get('opt')
    # 查詢需要的數據
    data = json.loads(req.body)
    # print(data)

    # 不同類型進行不同操作
    if opt == 'pos':
        obj = business_report.Main(data)
        flag, content = obj.start()
        if not flag:
            # 報錯，返回一個字典，前端進行提示
            return HttpResponse(json.dumps(content), content_type='application/json', status=422)
        else:
            print("%s店POS表提取完畢！" % data["storefront_name"])
            # 直接返回二進制excel數據
            return HttpResponse(content)
    elif opt == 'crm':
        pass

# 關於excel內容，我是后端及時生成返回的，如果是一個文件，讀取之后，進行返回即可

 

效果：

請求過程某處失敗：

 

請求正常：

 

 

 

 

 

 

 

 

 

 

python寫入excel的文檔：

https://www.cnblogs.com/zezhou/p/11931143.html

# 用的xlwt模塊