前端下载文件出现的服务错误网络错误问题_前端下载返回异常提示-CSDN博客

本文链接：https://blog.csdn.net/qq_56535418/article/details/130765797

文章讨论了前端使用a标签下载文件时download属性的影响，包括文件命名问题，浏览器对扩展名的检测不准确，以及Chrome浏览器在download属性下的referer行为差异，可能导致的下载失败问题。建议对于需要下载的文件，后台应设置Content-Disposition为attachment并指定filename，以确保兼容性和安全性。

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

一、前端下载文件方法

  const link = document.createElement('a')
  link.style.display = 'none'
  // link.download = data.attachmentRealName // 这句代码可能产生问题
  link.href = url // url为请求地址
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)

  const r = await downloadFile(params)
  const blob = new Blob([r], {
    type: 'application/vnd.ms-excel;charset=utf-8' // 文件格式
  })
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  // a.download = data.attachmentRealName // 这句可能会导致下载问题
  a.click()
  URL.revokeObjectURL(a.href)
  a.remove()

二、出现问题

在这里插入图片描述

总结

a标签的download 属性定义了下载文件的名称

当 download 属性值不为空时，下载的文件的名字由 download 的属性值确定，扩展名分两种情况：指定后缀名和不指定后缀名（扩展名由浏览器自动检测添加），但文件扩展名的检测正确率并不是100%，例如 .csv 文件会被检测成 .xls 文件，导致下载后文件打不开。
当 download 属性值为空时，下载的文件的名字和扩展名与源文件一致。

对于图片、pdf类的文件，一般需要配置download属性，告诉浏览器下载这个文件而不是直接预览。但是，如果后台返回图片/pdf时，设置了filename，即使前端没有添加 download 属性，浏览器也会进行下载。
添加了 download 属性的 a 标签，点击访问 href 地址，在 chrome 浏览器中，不会携带 referer 请求头。而在其他浏览器中、或是 chrome 访问不带 download 属性的 a 标签的 href，都会携带 referer。chrome 对于 download 属性处理的这个行为差异，很可能造成，加了 download 属性的 a 标签，访问带有 referer 校验的下载地址，返回失败。从而造成文件下载失败(报服务器错误)。
综上，使用 a 标签进行文件下载时，应该尽量不加 download 属性。对于图片等文件，让后台设置 Content-Disposition为 attachment，最好同时指定 filename，浏览器即可下载文件，防止预览。