axios+post獲取並下載后台返回的二進制流

axios+post獲取並下載后台返回的二進制流

　　　　　　　let url = $.getCookie('prefixUrl')+'/expenseword/exportWords';
            let vm = this;
            let len=vm.checkedIds.length;
            if(len<1){
                Message('至少選擇一條數據');
                return false;
            }
            let ids = vm.checkedIds.join(',');
            let sessionId=$.getCookie('sessionId');
            let params = {
                ids:ids, 
                sessionid:sessionId
            }
            let formData = ''
            for (let it in params) {
                formData += encodeURIComponent(it) + '=' + encodeURIComponent(params[it]) + '&'
            }  
            axios({
                method: 'post',
                url: url,
                data: formData,
                responseType: 'arraybuffer',//arraybuffer/blob
            }).then(res => {
                // let blob = new Blob([res.data], {type: 'application/zip;charset=utf-8'}); //指定格式為application/zip;charset=utf-8
                // let downloadElement = document.createElement('a');
                // let href = window.URL.createObjectURL(blob); //創建下載的鏈接
                // downloadElement.href = href;
                // downloadElement.download = '費用申請.zip'; //下載后文件名
                // document.body.appendChild(downloadElement);
                // downloadElement.click(); //點擊下載
                // document.body.removeChild(downloadElement); //下載完成移除元素
                // window.URL.revokeObjectURL(href); 
                //--------------
                const blob = new Blob([res.data], {type: 'application/zip;charset=utf-8'});
                const fileName = '費用報銷.zip'
                if ('download' in document.createElement('a')) { // 非IE下載
                    const elink = document.createElement('a')
                    elink.download = fileName
                    elink.style.display = 'none'
                    elink.href = URL.createObjectURL(blob)
                    document.body.appendChild(elink)
                    elink.click()
                    URL.revokeObjectURL(elink.href) // 釋放URL 對象
                    document.body.removeChild(elink)
                } else { // IE10+下載
                    navigator.msSaveBlob(blob, fileName)
                }
            }).catch((error) => {

            })
            // this.$http({
            //     method:'post',
            //     url:url,
            //     data: formData,
            //     ContentType:'application/zip;charset=UTF-8',
            //     responseType:'arraybuffer'
            // })
            // .then((res)=>{
            //     let blob = new Blob([res.data],{type:"application/zip"})
            //     let objectUrl = URL.createObjectURL(blob);
            //     window.location.href = objectUrl;
            // })

 補充說明：

contentType穩妥起見要寫上去，有可能出現傳到后台的不是一個表單形式,而是下面這種（見圖）

 

追加案情：

 按照上面的方式，正常情況下應該在瀏覽器中打印出來的res和res.data是下面這樣的（見圖），顯然一個responseType的屬性值是blob,下面是用的arraybuffer,兩種都正常

 

事故點------因為項目需要，重構過程中，整個項目的node版本有重裝最新版本，重新構建了項目結構，導致出現以下問題（見圖）

 

 對比一下，顯然data里面不一樣，正常情況下，應該是blob或者是一個arraybuffer,但實際卻是一個文件流，由此可見，這個轉換二進制流文件失敗了，百思不得其解，換回之前的環境后，一切正常。但具體是環境哪里出了問題，后續分析中，歡迎處理過此問題大神留言，不吝賜教，也歡迎翻車的伙伴交流。