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

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"},
{
    
    "",        "*/*"}

猜你喜欢

转载自blog.csdn.net/qq_43585322/article/details/132478393