vue下载文件

转载

mb5ffd7010f3b33 2021-08-23 21:41:00

文章标签 a标签 ios chrome 响应头添加属性 文章分类 代码人生

java 端
BAttachment attachment = attachmentService.getAttachment(fileId);
byte[] bData = fastdfsUploadService.fdfsDownload(attachmentService.getAttachment(fileId).getPath());

InputStream inputStream = new ByteArrayInputStream(bData);
String file_name = new String((attachment.getName()+"."+attachment.getSuffix()));
//设置响应头
response.reset();
response.setCharacterEncoding("utf-8");
response.setContentType("multipart/form-data");
response.setHeader("Content-Disposition",
        "attachment; filename=\"" + file_name + "\"");
output = response.getOutputStream();
byte[] buf = new byte[1024];
int i = 0;
while ((i = inputStream.read(buf)) > 0) {
    output.write(buf, 0, i);
}
output.flush();

vue端

return window.axios({
  url: `${window.CLIENT_COLLECTION_URL}/commonapi/downloadBizFile/${id}`,
  method: 'post',
  responseType: 'blob'
})

const content = res
const blob = new Blob([content]) // 构造一个blob对象来处理数据
const fileName = 'POSITION_NONSTANDARD.xlsx' // 导出文件名
// 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
// IE10以上支持blob但是依然不支持download
if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
  const link = document.createElement('a') // 创建a标签
  link.download = fileName // a标签添加属性
  link.style.display = 'none'
  link.href = URL.createObjectURL(blob)
  document.body.appendChild(link)
  link.click() // 执行下载
  URL.revokeObjectURL(link.href) // 释放url
  document.body.removeChild(link) // 释放标签