📝 前端怎么将base64类型的pdf数据加载到iframe中并下载

😀 工作中遇到的一些问题记录收集下来，方便下次遇到时能快速找到类似问题解决，怕忘记，积少成多

数据类型转换

如果后端返回的是一个pdf的base64类型的数据的话，前端可以将base64转换成一个Blob类型的数据，然后创建a标签来下载下来

// 这里我是在工具类中封装了下载的方法然后导出来使用的
// 下载临时保单保函
export const downLoadBaodanBaohan = (pdfData: any, fileName: string) => {
  // 创建一个 Blob 对象，将 base64 编码数据转换为二进制数据
  const byteCharacters = atob(pdfData);
  const byteArrays = [];
  for (let i = 0; i < byteCharacters.length; i++) {
    byteArrays.push(byteCharacters.charCodeAt(i));
  }
  const byteArray = new Uint8Array(byteArrays);
  const blob = new Blob([byteArray], { type: "application/octet-stream" });
  const downloadLink = document.createElement("a");
  downloadLink.href = URL.createObjectURL(blob);

  // 设置文件名
  downloadLink.download = fileName;

  // 触发点击事件
  downloadLink.dispatchEvent(new MouseEvent("click"));

  // 释放对象 URL
  URL.revokeObjectURL(downloadLink.href);
};

然后我们直接在调用后端接口返回的base64数据直接放进去处理就可以了

iframe中展示pdf

两种方法： 第一种：如果后端返回的是url这种也是可以的，不用怎么处理，直接丢到iframe中的src上就能加载出来了，就是手动下载时麻烦一点(不考虑浏览器pdf提供的那种下载，它那种下载我们不能自定义的)，我们要在请求url转换成blob再下载； **第二种：**如果后端直接返回的是base64，这样是最方便的，我们要想在iframe中显示的话直接在返回的base64中拼接字符串data:application/pdf;base64,${data}（data是返回的base64数据），然后将pdfData直接放到iframe中src上显示就行了