需求描述:
通过调用后台接口返回的文件流,实现点击下载pdf的功能
开发过程:
之前别的同事写过类似的功能,代码如下
// this.$alert(
// "<a href='http://xxx' style='border-bottom:1px solid #409EFF'>成功生成,点击此处下载PDF</a>",
// {
// dangerouslyUseHTMLString: true,
// }
// );
但是后台经过改动之后需要加token,这种方式不能满足需求,在经过大佬点拨之后,选择使用XMLHttpRequest的方式实现,代码如下
downRow() {
let basicFormFactoryName = this.basicForm.factoryName;
let basicFormName = this.basicForm.name;
let oReq = new XMLHttpRequest();
oReq.open("GET", "http://xxx", true);
oReq.responseType = "blob";
oReq.setRequestHeader("Content-Type", "application/json");
oReq.setRequestHeader("Authorization", "Bearer " + getToken());
//oReq.withCredentials = true;//如果跨域
oReq.onload = function (oEvent) {
let content = oReq.response;
let elink = document.createElement("a");
elink.download = basicFormFactoryName + basicFormName + "分析报告.pdf";
elink.style.display = "none";
let blob = new Blob([content]);
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
};
oReq.send();
this.open4 = false;
},