文件下载,后台返回的pdf数据是二进制流文件

157 阅读1分钟

文件下载,后台返回的pdf数据是二进制流文件

  1. 页面使用a标签
            <a
              @click="downCertificate(scope.row)"
              style="cursor: pointer"
              title="PDF"
            >
              <img
                style="width: 20px; height: 20px"
                src="~@/assets/PDF.png"
                alt=""
              />
            </a>
  1. 接口配置,表示要接收二进制流的文件,需要设置:responseType: "blob",
export function generatePdf(data) {
  return request({
    url: "xxxxxxxxxxxx",
    method: "post",
    data,
    responseType: "blob",
  });
}

  1. 添加下载方法
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 对象
};