這篇文章主要為大家詳細介紹了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);

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'

});

};

這樣即可成功下載。

關于vue.js的學習教程，請大家點擊專題vue.js組件學習教程、Vue.js前端組件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

來源：腳本之家

鏈接：https://www.jb51.net/article/199923.htm

申請創業報道，分享創業好點子。點擊此處，共同探討創業新機遇！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。