使用Vue时，我们前端如何处理后端返回的文件流首先后端返回流，这里我把流的动作拿出来了，我很多地方要用
/**
* 下载单个文件
*
* @param docId
*/
@GetMapping("/download/{docId}")
public void download(@PathVariable("docId") String docId,

HttpServletResponse response) {

outWrite(response, docId);
}

/**
* 输出文件流
* @param response
* @param docId
*/
private void outWrite(HttpServletResponse response, String docId) {

ServletOutputStream out = null;

try {

out = response.getOutputStream();

// 禁止图像缓存。

response.setHeader("Pragma", "no-cache");

response.setHeader("Cache-Control", "no-cache");

response.setDateHeader("Expires", 0);

byte[] bytes = docService.downloadFileSingle(docId);

if (bytes != null) {

MagicMatch match = Magic.getMagicMatch(bytes);

String mimeType = match.getMimeType();

response.setContentType(mimeType);

out.write(bytes);

}

out.flush();

} catch (Exception e) {

UnitedLogger.error(e);

} finally {

IOUtils.closeQuietly(out);

}
}
/**
* 下载单个文件
*
* @param docId
*/
@GetMapping("/download/{docId}")
public void download(@PathVariable("docId") String docId,

HttpServletResponse response) {

outWrite(response, docId);
}

/**
* 输出文件流
* @param response
* @param docId
*/
private void outWrite(HttpServletResponse response, String docId) {

ServletOutputStream out = null;

try {

out = response.getOutputStream();

// 禁止图像缓存。

response.setHeader("Pragma", "no-cache");

response.setHeader("Cache-Control", "no-cache");

response.setDateHeader("Expires", 0);

byte[] bytes = docService.downloadFileSingle(docId);

if (bytes != null) {

MagicMatch match = Magic.getMagicMatch(bytes);

String mimeType = match.getMimeType();

response.setContentType(mimeType);

out.write(bytes);

}

out.flush();

} catch (Exception e) {

UnitedLogger.error(e);

} finally {

IOUtils.closeQuietly(out);

}
}前端这里我引入了一个组件 js-file-download
npm install js-file-download --save
npm install js-file-download --save然后在Vue文件中添加进来
import fileDownload from "js-file-download";

// 文档操作列对应事件
async handleCommand(item, data) {

switch (item.key) {

case "download":

var res = await this.download(data);

return fileDownload(res, data.name);

...

default:

}

// 刷新当前层级的列表

const folder = this.getLastFolderPath();

this.listClick(folder.folderId, folder.name);
},
// 下载
async download(row) {

if (this.isFolder(row.type)) {

return FolderAPI.download(row.id);

} else {

return DocAPI.download(row.id);

}
},
import fileDownload from "js-file-download";

// 文档操作列对应事件
async handleCommand(item, data) {

switch (item.key) {

case "download":

var res = await this.download(data);

return fileDownload(res, data.name);

...

default:

}

// 刷新当前层级的列表

const folder = this.getLastFolderPath();

this.listClick(folder.folderId, folder.name);
},
// 下载
async download(row) {

if (this.isFolder(row.type)) {

return FolderAPI.download(row.id);

} else {

return DocAPI.download(row.id);

}
},docAPI js 注意需要设置responseType
/**
* 下载单个文件
* @param {*} id
*/
const download = (id) => {
return request({
url: _DataAPI.download + id,
method: "GET",
responseType: 'blob'
});
};
/**
* 下载单个文件
* @param {*} id
*/
const download = (id) => {
return request({
url: _DataAPI.download + id,
method: "GET",
responseType: 'blob'
});
};这样即可成功下载。关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。vue.js组件学习教程Vue.js前端组件学习教程以上就是本文的全部内容，希望对大家的学习有所帮助。