vue 从后台下载文件_vue download设置content-type-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42624884/article/details/115487885

这段代码展示了如何使用axios进行文件下载，特别是设置responseType为'blob'和'Content-Type'来处理不同类型的文件，如zip、doc、pdf等。当下载失败时，会显示错误消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 调用后台接口
this.axios.post(url, param,{responseType: "blob",headers:{ 'Content-Type': 'application/json; application/octet-stream'} }.(res=>{
	this.downloadZip(res,'下载文件名')
}),
// 下载
downloadZip(res,name) {
    if(res.size>0){ // 判断文件是否存在
      let blob = new Blob([res], { type: "application/zip" });
      // { type: 'application/zip'} 下载压缩包
      let url = window.URL.createObjectURL(blob);
      const link = document.createElement("a"); // 创建a标签
      link.href = url;
      link.download = name; // 重命名文件
      link.click();
      URL.revokeObjectURL(url); // 释放内存
      this.clearDown()
    }else {
      this.$message.error('下载失败')
    }
  }

下载格式可以通过更改下载文件的类型(type：‘application/zip’)，具体有以下这些类型

	'doc'       => 'application/msword',
    'bin'       => 'application/octet-stream',
    'exe'       => 'application/octet-stream',
    'so'        => 'application/octet-stream',
    'dll'       => 'application/octet-stream',
    'pdf'       => 'application/pdf',
    'ai'        => 'application/postscript',
    'xls'       => 'application/vnd.ms-excel',
    'ppt'       => 'application/vnd.ms-powerpoint',
    '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',
    'gif'       => 'image/gif',
    'jpeg'      => 'image/jpeg',
    'jpg'       => 'image/jpeg',
    'png'       => 'image/png',
    'css'       => 'text/css',
    'html'      => 'text/html',
    'htm'       => 'text/html',
    'txt'       => 'text/plain',
    'xsl'       => 'text/xml',
    'xml'       => 'text/xml',
    'mpeg'      => 'video/mpeg',
    'mpg'       => 'video/mpeg',
    'avi'       => 'video/x-msvideo',
    'movie'     => 'video/x-sgi-movie'