目錄

一，本文解決問題如下

二，原下載代碼

1，ajax get 下載文件

2，下載異常圖：

三，成功下載的

1，?JQuery?實(shí)現(xiàn)文件下載xhr

2，圖例

引言：

本人使用的ajax 下載，由于下載CSV,文本之類的沒有問題，下載zip是出現(xiàn)各種問題。發(fā)現(xiàn)是設(shè)置responseType:"blob"沒生效，項(xiàng)目中又沒有maskjs，無法在提交請求之前重新responseType定義。再就是在整個(gè)jquery代碼中找到實(shí)現(xiàn)真是太費(fèi)眼睛了，后續(xù)用xhr實(shí)現(xiàn)擺脫了ajax只能下載文本的問題，這個(gè)也是處理問題的關(guān)鍵。

一，本文解決問題如下

1,mock模塊會(huì)影響原生的ajax請求，使得服務(wù)器返回的blob類型變成亂碼
2,壓縮文件出現(xiàn)不可預(yù)料的壓縮文件末端
3,后端生成Zip文件通過瀏覽器下載后文件損壞，無法打開

posman已經(jīng)測試了，能正常下載，不是后端的問題

二，原下載代碼

1，ajax get 下載文件

? ?$.ajax(
?? ??? ? ?{type='get',
?? ??? ? ?url:url,
?? ??? ? ?timeout=30000,
?? ??? ? ?msg:param,
?? ??? ? ?responseType:"blob"http://沒生效
?? ??? ? ?},
?? ??? ? ?
?? ??? ? ?succes:function(response,status,xhr){
?? ??? ? ? ? ? ?let fileName = xhr.getResponseHeader("content-disposition").split(';')[1].split('=')[1].replace(/\"/g,'')
? ? ? ? ? ? ? ? let type = ?xhr.getResponseHeader("content-type")
? ? ? ? ? ? ? ? let blob = new Blob([data],{type:type})?;設(shè)置類型并未生效

?? ??? ??? ??? ?var link = document.createElement('a');
?? ??? ??? ??? ?link.download = fileName;
?? ??? ??? ??? ?link.style.display = 'none';
?? ??? ??? ??? ?link.href = URL.createObjectURL(blob);
?? ??? ??? ??? ?document.body.appendChild(link);
?? ??? ??? ??? ?link.click();
?? ??? ??? ??? ?URL.revokeObjectURL(link.href);
?? ??? ??? ??? ?document.body.removeChild(link);

?? ??? ? ?},
?? ??? ? ?
?? ??? ? ?error:function(date){
?? ??? ? ? ? ? console.log("下載失敗")
?? ??? ? ?}
?? ? ?
?? ? ?)
?? ? ?

2，下載異常圖：

文件損壞

壓縮文件出現(xiàn)不可預(yù)料的壓縮文件末端

? ? ? ?

三，成功下載的

1，?JQuery?實(shí)現(xiàn)文件下載xhr

var xhr = new XMLHttpRequest();
? ? ? ? xhr.open('get', url, true); ? ?
? ? ? ? xhr.responseType = "blob"; ?// 返回類型blob
? ? ? ? xhr.setRequestHeader("Content-type", "application/json;charset=utf-8");?
?? ??? ? xhr.setRequestHeader("msg", "param");
? ? ? ? xhr.onload = function () {
? ? ? ? ? ? if (this.status === 200) {
? ? ? ? ? ? ? ? var blob = this.response;
? ? ? ? ? ? ? ? var reader = new FileReader();
? ? ? ? ? ? ? ? reader.readAsDataURL(blob); ?// 轉(zhuǎn)換為base64，可以直接放入a標(biāo)簽href
? ? ? ? ? ? ? ? reader.onload = function (e) {
? ? ? ? ? ? ? ? ? ? // 轉(zhuǎn)換完成，創(chuàng)建一個(gè)a標(biāo)簽用于下載
? ? ? ? ? ? ? ? ? ? var a = document.createElement('a');
?? ??? ??? ??? ? ? ?var fileName = xhr.getResponseHeader("content-disposition").split(';')[1].split('=')[1].replace(/\"/g,'')
? ? ? ? ? ? ? ? ? ? a.download = fileName;
? ? ? ? ? ? ? ? ? ? a.href = e.target.result;
? ? ? ? ? ? ? ? ? ? $("body").append(a); ?// 修復(fù)firefox中無法觸發(fā)click
? ? ? ? ? ? ? ? ? ? a.click();
? ? ? ? ? ? ? ? ? ? $(a).remove();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }else{
?? ??? ??? ? ? console.log("下載失敗")
?? ??? ??? ?}
? ? ? ? };
? ? ? ? // 發(fā)送ajax請求
? ? ? ? xhr.send(null)

2，圖例

文章來源地址http://www.zghlxwxcb.cn/news/detail-701418.html

到了這里，關(guān)于前端js下載zip文件異常問題解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！