【vue2】前端实现下载后端返回的application/octet-stream文件流

2024-06-28 09:03:02 阅读 80

1、下载csv/txt时

此时无须修改接口的响应格式

let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;

let matches = filenameRegex.exec(data.headers['content-disposition']);

let blob = new Blob(['\uFEFF' + data.data], { //目前只有csv格式

type: 'text/csv;charset=utf-8'

})

var downloadElement = document.createElement('a');

var href = window.URL.createObjectURL(blob);

downloadElement.href = href;

downloadElement.download = matches[1].substring(0, matches[1].lastIndexOf('.'));

document.body.appendChild(downloadElement);

downloadElement.click(); //注销掉

window.URL.revokeObjectURL(href); //清除生成的链接,会占用一些东西,不知道啥,反正运行慢点

2、下载Excel时,需要修改一下接口的响应格式为blob

axios({

method: "POST",

url: constants.url.QUERY_DESCRIBE_TEST_REPORT_DOWNLOAD,

responseType: "blob",//FIXME 很重要

timeout: 60000,

data: {

TestTaskId,

},

})

.then((response) => {

console.log("response", response);

if (!response || !response.data) {

self.$message({

type: "error",

message: "导出失败!",

});

return;

}

let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;

let matches = filenameRegex.exec(

response.headers["content-disposition"]

);

let blob = new Blob([response.data]);

let downloadFilename = matches[1];

if (window.navigator && window.navigator.msSaveOrOpenBlob) {

//兼容ie浏览器

window.navigator.msSaveOrOpenBlob(blob, downloadFilename);

} else {

//谷歌,火狐等浏览器

let url = window.URL.createObjectURL(blob);

let downloadElement = document.createElement("a");

downloadElement.style.display = "none";

downloadElement.href = url;

downloadElement.download = downloadFilename;

document.body.appendChild(downloadElement);

downloadElement.click();

document.body.removeChild(downloadElement);

window.URL.revokeObjectURL(url);

}

})

.catch((err) => {

this.$message.error(err);

});

{ ".3gp", "video/3gpp"},

{ ".apk", "application/vnd.android.package-archive"},

{ ".asf", "video/x-ms-asf"},

{ ".avi", "video/x-msvideo"},

{ ".bin", "application/octet-stream"},

{ ".bmp", "image/bmp"},

{ ".c", "text/plain"},

{ ".csv", "text/csv;charset=utf-8"},

{ ".class", "application/octet-stream"},

{ ".conf", "text/plain"},

{ ".cpp", "text/plain"},

{ ".doc", "application/msword"},

{ ".docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"},

{ ".xls", "application/vnd.ms-excel"},

{ ".xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"},

{ ".exe", "application/octet-stream"},

{ ".gif", "image/gif"},

{ ".gtar", "application/x-gtar"},

{ ".gz", "application/x-gzip"},

{ ".h", "text/plain"},

{ ".htm", "text/html"},

{ ".html", "text/html"},

{ ".jar", "application/java-archive"},

{ ".java", "text/plain"},

{ ".jpeg", "image/jpeg"},

{ ".jpg", "image/jpeg"},

{ ".js", "application/x-javascript"},

{ ".log", "text/plain"},

{ ".m3u", "audio/x-mpegurl"},

{ ".m4a", "audio/mp4a-latm"},

{ ".m4b", "audio/mp4a-latm"},

{ ".m4p", "audio/mp4a-latm"},

{ ".m4u", "video/vnd.mpegurl"},

{ ".m4v", "video/x-m4v"},

{ ".mov", "video/quicktime"},

{ ".mp2", "audio/x-mpeg"},

{ ".mp3", "audio/x-mpeg"},

{ ".mp4", "video/mp4"},

{ ".mpc", "application/vnd.mpohun.certificate"},

{ ".mpe", "video/mpeg"},

{ ".mpeg", "video/mpeg"},

{ ".mpg", "video/mpeg"},

{ ".mpg4", "video/mp4"},

{ ".mpga", "audio/mpeg"},

{ ".msg", "application/vnd.ms-outlook"},

{ ".ogg", "audio/ogg"},

{ ".pdf", "application/pdf"},

{ ".png", "image/png"},

{ ".pps", "application/vnd.ms-powerpoint"},

{ ".ppt", "application/vnd.ms-powerpoint"},

{ ".pptx", "application/vnd.openxmlformats-officedocument.presentationml.presentation"},

{ ".prop", "text/plain"},

{ ".rc", "text/plain"},

{ ".rmvb", "audio/x-pn-realaudio"},

{ ".rtf", "application/rtf"},

{ ".sh", "text/plain"},

{ ".tar", "application/x-tar"},

{ ".tgz", "application/x-compressed"},

{ ".txt", "text/plain"},

{ ".wav", "audio/x-wav"},

{ ".wma", "audio/x-ms-wma"},

{ ".wmv", "audio/x-ms-wmv"},

{ ".wps", "application/vnd.ms-works"},

{ ".xml", "text/plain"},

{ ".z", "application/x-compress"},

{ ".zip", "application/x-zip-compressed"},

{ "", "*/*"}



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。