vue實(shí)現(xiàn)下載文件流完整前后端代碼
使用Vue時(shí),我們前端如何處理后端返回的文件流
首先后端返回流,這里我把流的動(dòng)作拿出來了,我很多地方要用
/**
* 下載單個(gè)文件
*
* @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);
}
}
前端這里我引入了一個(gè)組件 js-file-download
npm install js-file-download --save
然后在Vue文件中添加進(jìn)來
import fileDownload from "js-file-download";
// 文檔操作列對(duì)應(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)前層級(jí)的列表
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
/**
* 下載單個(gè)文件
* @param {*} id
*/
const download = (id) => {
return request({
url: _DataAPI.download + id,
method: "GET",
responseType: 'blob'
});
};
這樣即可成功下載。
關(guān)于vue.js的學(xué)習(xí)教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue打包上傳服務(wù)器加載提示錯(cuò)誤Loading chunk {n} failed
這篇文章主要為大家介紹了vue打包上傳服務(wù)器加載提示錯(cuò)誤Loading chunk {n} failed解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
關(guān)于dev-tool安裝方法(手動(dòng)安裝版)
這篇文章主要介紹了關(guān)于dev-tool安裝方法(手動(dòng)安裝版),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能
本文通過實(shí)例代碼給大家介紹了Vue.js中使用iView日期選擇器并設(shè)置開始時(shí)間結(jié)束時(shí)間校驗(yàn)功能,需要的朋友可以參考下2018-08-08
element?ui?From表單校驗(yàn)不生效問題解決
表單校驗(yàn)是注冊(cè)環(huán)節(jié)中必不可少的操作,表單校驗(yàn)可以提醒用戶填寫數(shù)據(jù)規(guī)則以確保用戶提交數(shù)據(jù)的有效性,本文主要介紹了element?ui?From表單校驗(yàn)不生效問題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
解決vant title-active-color與title-inactive-color不生效問題
這篇文章主要介紹了解決vant title-active-color與title-inactive-color不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue組件之極簡(jiǎn)的地址選擇器的實(shí)現(xiàn)
這篇文章主要介紹了Vue組件之極簡(jiǎn)的地址選擇器的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue數(shù)據(jù)表格增刪改查與表單驗(yàn)證代碼詳解
這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)表格增刪改查與表單驗(yàn)證的相關(guān)資料,Vue可以通過使用組件化的方式來實(shí)現(xiàn)表格的增刪改查功能,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法
本篇文章主要介紹了詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法,在VUE開發(fā)時(shí),數(shù)據(jù)可以使用jquery和vue-resource來獲取數(shù)據(jù),有興趣的可以了解一下。2017-01-01
vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本
這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02

