后端返文件流前端下载文件(常见的文件type类型)

连接的api接口

export function template(data) {
  return request({
    url: `接口地址`,
    method: 'post',
    data: data,
    // responseType: "arraybuffer"
      responseType: 'blob'
  })
}

    downloadOriginFile(val, {
        responseType: 'blob',
    }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(url) // 释放内存
        document.body.removeChild(link)
    })

前端进行下载

    downloadTemplate(){
      port.template().then(res=>{ 
            this.$message.success('下载成功')

        //创建
const url = window.URL.createObjectURL(new Blob([res], { type: "application/pdf;charset=utf-8" }))//返回的数据

        //const url = window.URL.createObjectURL(new Blob([res]))//返回的数据

            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url

            //自定义文件名称
            let date=new Date().Format("yyyyMMddhhmmss")
            link.setAttribute('download', '人员信息模版_' +date+ '.xls')//文件名
            
    //有些框架会将请求头屏蔽，然后直接返回文件流，这时候需要自己去单独写一个axios方法进行接口调用
    // 获取后端给前端返的请求头中的文件名称
    //const temp =res.headers["content-disposition"].split(";")[1].split("filename=")[1];
            //const name= decodeURIComponent(temp)



            document.body.appendChild(link)
            link.click()
            link.remove()
            window.URL.revokeObjectURL(url)
      })
    },

单独写axios进行下载

 //引入
import { getToken } from "@/utils/auth";
import axios from 'axios';
axios.defaults.headers['Authorization'] = 'Bearer ' + getToken();
axios.defaults.headers['Content-Type'] = 'application/pdf;charset=utf-8';


 
downloadTemplate() {
      let data={}
      axios({
          method: 'post',
          url: '接口地址',
          data: data,
          responseType: 'blob'
        }).then((res) => {
            // 文件流
            const content = res;
            const blob = new Blob([content]);
            //const blob = new Blob([content], { type: application/pdf;charset=utf-8 });
            let url = window.URL.createObjectURL(blob);
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
 
            // 获取后端给前端返的请求头中的文件名称
            const temp =res.headers["content-disposition"].split(";")[1].split("filename=")[1];
            const name= decodeURIComponent(temp)
    
            link.download = name
            document.body.appendChild(link);
            link.click();
            link.remove()
            window.URL.revokeObjectURL(url); //释放掉blob对象
      })
      .catch(error => {
        //console.log(error);
      });
    }

 常见的文件type类型

export function getFileType(name) {
  let arr = [
    { type: 'doc', application: 'application/msword' },
    {
      type: 'docx',
      application: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    },
    { type: 'dot', application: 'application/msword' },
    {
      type: 'dotx',
      application: 'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
    },
    { type: 'xls', application: 'application/vnd.ms-excel' },
    {
      type: 'xlsx',
      application: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    },
    { type: 'ppt', application: 'application/vnd.ms-powerpoint' },
    {
      type: 'pptx',
      application: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
    },
    { type: 'pdf', application: 'application/pdf' },
    { type: 'txt', application: 'text/plain' },
    { type: 'gif', application: 'image/gif' },
    { type: 'jpeg', application: 'image/jpeg' },
    { type: 'jpg', application: 'image/jpeg' },
    { type: 'png', application: 'image/png' },
    { type: 'css', application: 'text/css' },
    { type: 'html', application: 'text/html' },
    { type: 'htm', application: 'text/html' },
    { type: 'xsl', application: 'text/xml' },
    { type: 'xml', application: 'text/xml' },
    { type: 'mpeg', application: 'video/mpeg' },
    { type: 'mpg', application: 'video/mpeg' },
    { type: 'avi', application: 'video/x-msvideo' },
    { type: 'movie', application: 'video/x-sgi-movie' },
    { type: 'bin', application: 'application/octet-stream' },
    { type: 'exe', application: 'application/octet-stream' },
    { type: 'so', application: 'application/octet-stream' },
    { type: 'dll', application: 'application/octet-stream' },
    { type: 'ai', application: 'application/postscript' },
    { type: 'dir', application: 'application/x-director' },
    { type: 'js', application: 'application/x-javascript' },
    { type: 'swf', application: 'application/x-shockwave-flash' },
    { type: 'xhtml', application: 'application/xhtml+xml' },
    { type: 'xht', application: 'application/xhtml+xml' },
    { type: 'zip', application: 'application/zip' },
    { type: 'mid', application: 'audio/midi' },
    { type: 'midi', application: 'audio/midi' },
    { type: 'mp3', application: 'audio/mpeg' },
    { type: 'rm', application: 'audio/x-pn-realaudio' },
    { type: 'rpm', application: 'audio/x-pn-realaudio-plugin' },
    { type: 'wav', application: 'audio/x-wav' },
    { type: 'bmp', application: 'image/bmp' },
  ];
    let type_node=arr.filter(item=>item.type==name);
    return type_node.length>0?type_node[0]:null
}