vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码
這篇文章主要為大家詳細介紹了vue實現(xiàn)下載文件流完整前后端代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
使用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);
}
}
前端這里我引入了一個組件 js-file-download
npm install js-file-download --save
然后在Vue文件中添加進來
import fileDownload from "js-file-download";
// 文檔操作列對應(yīng)事件
async handleCommand(item, data) {
switch (item.key) {
case "download":
var res = await this.download(data);
return fileDownload(res, data.name);
...
default:
}
// 刷新當(dāng)前層級的列表
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 注意需要設(shè)置responseType
/**
* 下載單個文件
* @param {*} id
*/
const download = (id) => {
return request({
url: _DataAPI.download + id,
method: "GET",
responseType: 'blob'
});
};
這樣即可成功下載。
關(guān)于vue.js的學(xué)習(xí)教程，請大家點擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
來源：腳本之家
鏈接：https://www.jb51.net/article/199923.htm
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 线程分组_Java多线程可以分
- 下一篇： vue ani_ANI的完整形式是什么？