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.js實(shí)現(xiàn)checkbox的全選反選效果
最近用vue做了兩個(gè)項(xiàng)目,都需要實(shí)現(xiàn)全選反選的功能,所以想著記錄下分享給大家,方便自己或者有需要的朋友們參考講學(xué)習(xí),所以下面這篇文章主要介紹了利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果,需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。2017-01-01vue實(shí)現(xiàn)后臺(tái)管理權(quán)限系統(tǒng)及頂欄三級(jí)菜單顯示功能
這篇文章主要介紹了vue實(shí)現(xiàn)后臺(tái)管理權(quán)限系統(tǒng)及頂欄三級(jí)菜單顯示功能,本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系
本篇文章主要介紹了談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08