vue如何使用文件流进行下载(new Blob)
作者：有蝉
这篇文章主要介绍了vue如何使用文件流进行下载(new Blob)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue使用文件流进行下载(new Blob)
封装方法
function getExel(url, params, index) {+
return new Promise(function(resolve, reject) {
let data = {
method: "GET",
url:url,
headers: {
'token': gettoken("token")
},
responseType: 'arraybuffer'
}
resolve(axios(data));
})
}注意：responseType应设置为：'arraybuffer'
发送请求（$Api已经挂载在了vue对象上，所以可以这么使用）
this.$Api.getExel("/goodsCheckService/v1/planMaterial/export?idList="+idArray)
.then(response => {
let a = document.createElement('a');
//ArrayBuffer 转为 Blob
let blob = new Blob([response.data], {type: "application/vnd.ms-excel"});
let objectUrl = URL.createObjectURL(blob);
a.setAttribute("href",objectUrl);
a.setAttribute("download", '计划单电子表格.xls');
a.click();
});vue下载文件流完整前后端代码
使用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);
response.addHeader("Content-Length", String.valueOf(bytes.length));
out.write(bytes);
}
out.flush();
} catch (Exception e) {
UnitedLogger.error(e);
} finally {
IOUtils.closeQuietly(out);
}
}前端这里我引入了一个组件 js-file-download
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);
}
},docAPI js 注意需要设置responseType
/**
* 下载单个文件
* @param {*} id
*/
const download = (id) => {
return request({
url: _DataAPI.download + id,
method: "GET",
responseType: 'blob'
});
};这样即可成功下载
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。