快捷導(dǎo)航

vue如何使用文件流進(jìn)行下載(new Blob)

更新時(shí)間：2022年09月22日 11:24:59 作者：有蟬

這篇文章主要介紹了vue如何使用文件流進(jìn)行下載(new Blob)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue使用文件流進(jìn)行下載(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應(yīng)設(shè)置為：'arraybuffer'

發(fā)送請(qǐng)求（$Api已經(jīng)掛載在了vue對(duì)象上，所以可以這么使用）

this.$Api.getExel("/goodsCheckService/v1/planMaterial/export?idList="+idArray)
? ? ? ? ? .then(response => {
? ? ? ? ? ? ? let a = document.createElement('a');
?
? ? ? ? ? ? ? //ArrayBuffer 轉(zhuǎn)為 Blob
? ? ? ? ? ? ? let blob = new Blob([response.data], {type: "application/vnd.ms-excel"});?
? ? ? ? ? ? ??
? ? ? ? ? ? ? let objectUrl = URL.createObjectURL(blob);
? ? ? ? ? ? ? a.setAttribute("href",objectUrl);
? ? ? ? ? ? ? a.setAttribute("download", '計(jì)劃單電子表格.xls');
? ? ? ? ? ? ? a.click();
});

vue下載文件流完整前后端代碼

使用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);
? ? ? ? ? ? ? ? response.addHeader("Content-Length", String.valueOf(bytes.length));
? ? ? ? ? ? ? ? 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'
? });
};

這樣即可成功下載

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: