js 前端接收后台传过来的文件流
有的时候,由于服务器文件不是开放的,所以可能会需要前端用ajax传一段加密信息才能下载,而且返回的是文件流,不能直接用location.href或a标签直接下载,这时候我们怎么办呢?情况一:验证信息是在header//http.jsimport Vue from "vue";import axios from "axios";//定义获取文件流函数export function...
·
有的时候,由于服务器文件不是开放的,所以可能会需要前端用ajax传一段加密信息才能下载,而且返回的是文件流,不能直接用location.href或a标签直接下载,这时候我们怎么办呢?
情况一:验证信息是在header
//http.js
import Vue from "vue";
import axios from "axios";
//定义获取文件流函数
export function downLoad(obj) {
return axios.get(paramsData.url, {
params: paramsData.dat,
baseURL: "/foo",
headers: {
"busi-sign": paramsData.token
},
responseType: "arraybuffer"
});
}
//调用
import { downLoad } from "@/utils/http";
clickDownload(){
let data = {
fileKey: 'fileKey',
time: (new Date()).getTime()
};
let paramsData= {
url: "/file/downloadFile",
token: token,
dat: data
};
downLoad(paramsData).then(response => {
//获取文件名称与文件类型
const filename = response.headers["file-name"];
const contentType = response.headers["content-type"];
//创建a标签
let linkElement = document.createElement("a");
//创建 blob对象 第一个参数 response.data是代表后端返回的文件流 ,第二个参数设置文件类型
let blob = new Blob([response.data], {
type: contentType
});
//生成生成下载链接 这个链接放在a标签上是直接下载,放在img上可以直接显示图片问价,视频同理
const url = window.URL.createObjectURL(blob);
let linkElement = document.createElement("a");
linkElement.setAttribute("href", url);
linkElement.setAttribute("target", '_blank');
linkElement.setAttribute("download", filename);
//模拟点击a标签
if (typeof MouseEvent == "function") {
var event = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: false
});
linkElement.dispatchEvent(event);
}
})
}
情况二:验证信息在url上的,则直接生成url就可以了
async fileDownload(params){
//获取授权码函数
const res = await getAuthCode(params)
if(res.code == 0){
this.authCode=res.data
}
let url = `http://testDownload.com/file?fileKey=${fileKey}&authCode=${authCode}`;
let linkElement = document.createElement("a");
linkElement.setAttribute("href", url);
linkElement.setAttribute("target", '_blank');
if (typeof MouseEvent == "function") {
let event = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: false
});
linkElement.dispatchEvent(event);
}else if (navigator.appVersion.toString().indexOf(".NET") > 0) {
//如果具备msSaveBlob函数 则直接使用msSaveBlob函数直接保存文件
window.navigator.msSaveBlob(blob, filename);
}
},
至此完成,如果对你有帮助,请点个双击么么哒!
如有不解,请加群897149839
更多推荐
已为社区贡献7条内容
所有评论(0)