文件下载,后台返回的pdf数据是二进制流文件
- 页面使用a标签
<a
@click="downCertificate(scope.row)"
style="cursor: pointer"
title="PDF"
>
<img
style="width: 20px; height: 20px"
src="~@/assets/PDF.png"
alt=""
/>
</a>
- 接口配置,表示要接收二进制流的文件,需要设置:responseType: "blob",
export function generatePdf(data) {
return request({
url: "xxxxxxxxxxxx",
method: "post",
data,
responseType: "blob",
});
}
- 添加下载方法
const downCertificate = (row) => {
generatePdf().then((res) => {
downloadBlob(res, "xxxxxxx.pdf");
});
};
const downloadBlob = (blobData, fileName) => {
// 创建一个 Blob 对象
const blob = new Blob([blobData]);
// 创建一个下载 URL
const downloadUrl = window.URL.createObjectURL(blob);
// 创建一个隐藏的 <a> 元素并触发下载
const link = document.createElement("a");
link.href = downloadUrl;
link.download = fileName; // 设置文件名
// 触发点击下载
document.body.appendChild(link); // 必须将 link 添加到 DOM 才能触发 click 事件
link.click();
// 清理
document.body.removeChild(link);
window.URL.revokeObjectURL(downloadUrl); // 释放 URL 对象
};