【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"},
{ "", "*/*"}
上一篇: 【学习记录】Open-WebUI 非Docker安装
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。