JavaScript下载后端返回的文件流
JavaScript下载后端返回的文件流(方法一)
后端返回的结果
/* 创建一个js写以下代码 */
import axios from 'axios';
/*
先安装: npm install js-file-download
main.js引入 import fileDownload from 'js-file-download';
* */
/*
* url: 请求接口地址
* fileName: 文件名,例如: ccc.png
* */
export function $fileDownload(url, fileName, config = {}) {
axios.request({
url: url,
method: "get",
data: config.data,
responseType: 'blob'
}).then(
response => {
console.log("fileName: ", fileName)
let fileDownload = require('js-file-download');
fileDownload(response.data, fileName);
if (typeof config.resolve === 'function') {
config.resolve();
}
},
error => {
let hasError = true;
if (error.response) {
const status = error.response.status;
if (status === 401) {
hasError = false;
}
}
if (hasError) {
this.$showError('下载出错,请稍后再试');
}
if (typeof config.reject === 'function') {
config.reject();
}
}
);
}
/*
* 引入import {$fileDownload} from "../../plugin/utils";
* 然后在methods中调用封装的$fileDownload即可
*/
// 打开附件
openFile (item) {
console.log(item);
/*item {
id: "D64C87AD4AF51CCFE0537C0AA8C0A129"
trainingManagementId: "D3E0484993A472DCE0537C0AA8C01C26"
fileName: "cls_jpg1.jpg"
filePath: "/data/apcos/6332/app-standard/app-standard/cdtraining/2022_01_24/c1ff8d5b-f254-4297-b4cb-20839a4316f2cls_jpg1.jpg"
createTime: "2022-01-24 11:26:10"
}*/
let url = `${this.url}/cdtraining/api/download?id=${item.id}`
$fileDownload(url, item.fileName)
},
结果
JavaScript下载后端返回的文件流(方法二)
methods: {
// 打开附件
openFile(item) {
this.$axios.get('api', {
responseType: 'arraybuffer'
}).then(res => {
let dt = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;
console.log("dt: ", dt);
});
// console.log(item);
// let url = `${this.url}/upload/downloadFile?fileAddress=${item.other}&fileName=${item.fileAddress}`
// $fileDownload(url, item.fileAddress)
},
}
结果
JavaScript下载后端返回的文件流(方法三)
在downloadFile.js中
export async function downloadFile({ data, headers }) {
// todo 增加后端报错时的错误捕获
// 通过content-disposition获取文件名称
const fileName = /.*filename=(.*)/i.exec(headers["content-disposition"])?.[1] || "下载";
// 开始下载
const a = document.createElement("a");
a.href = (window.URL || window.webkitURL).createObjectURL(
new Blob([data], {
type: headers["content-type"]
})
);
a.download = decodeURIComponent((fileName));
a.dispatchEvent(new MouseEvent("click"));
}
在接口文件api.js
// 导出
export function materialExport(data) {
return http.post(`/api/import/materialExport`, data, {
responseType: "arraybuffer" // 须指定返回类型为 arraybuffer
});
}
在html中引入downloadFile.js, api.js
<template>
<button @click="handelExport">导出下载</button>
</template>
<script>
import { downloadFile } from @/downloadFile
import { api } from @/api
methods: {
async handelExoprt() {
let obj = {}
}
if (this.tableData.length === 0) {
this.$message({
message: "无数据, 不能下载",
type: "warning"
})
}else {
await downloadFile(await materialExport(obj));
}
}
</script>
结果