前端实现如何下载各种文件流文档

前端实现如何下载各种文件流文档

1.整理下载文档对应的application类型:

//key代表对应的文件类型，value代表对应的application值
const applicationType={
    "doc"："application/msword",
    "docx":"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    "dot":"application/msword",
    "dotx":"application/vnd.openxmlformats-officedocument.wordprocessingml.template",
    "xls":"application/vnd.ms-excel",
    "xlsx":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    "ppt":"application/vnd.ms-powerpoint",
    "pptx":"application/vnd.openxmlformats-officedocument.presentationml.presentation",
    "pdf":"application/pdf",
    "txt":"text/plain",
    "gif":"image/gif",
    "jpeg":"image/jpeg",
    "jpg":"image/jpeg",
    "png":"image/png",
    "css":"text/css",
    "html":"text/html",
    "xsl": "text/xml" ,
    "xml": "text/xml",
    "mpeg": "video/mpeg",
    "mpg": "video/mpeg",
    "avi": "video/x-msvideo",
    "movie": "video/x-sgi-movie",
    "bin": "application/octet-stream"
    "exe": "application/octet-stream",
    "so": "application/octet-stream",
    "dll": "application/octet-stream",
    "ai": "application/postscript",
    "dir": "application/x-director",
    "js": "application/x-javascript",
    "swf": "application/x-shockwave-flash",
    "xhtml": "application/xhtml+xml",
    "xht": "application/xhtml+xml",
    "zip": "application/zip",
    "mid": "audio/midi",
    "midi": "audio/midi",
    "mp3": "audio/mpeg",
    "rm": "audio/x-pn-realaudio",
    "rpm": "audio/x-pn-realaudio-plugin",
    "wav": "audio/x-wav",
    "bmp": "image/bmp"
}

2.通过文件流形式实现文件的下载:

//data是请求接口的参数
const downMethod=(data)=>{
   axios({
   method:post,//请求配置方法
   url:'xxxxxx..',//url路径
   params:data,//请求参数
   responseType:'blob',//服务器响应的数据类型,返回类型有：'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
 }).then(res=>{
     //通过a标签和blob流实现文件下载
     const link=document.createElement('a')
     let blob=new Blob([res],{
     type:applicationType['xlsx']
     })
     link.href=URL.createObjectURL(blob)//添加下载地址
     link.download=data.fileName
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
 })
}