vue3室友iframe实现pdf弹窗预览

效果：

代码：

弹窗

let docSrc = ref("");
let pdfSrc = ref("");
const bodyStyle = {
  height: `700px`,
  // marginTop: '-40px'
  // padding: '0 24px'
};
let pdfUrl = ref("");
const preview = (record) => {
  visible.value = true;
  title.value = "预览";
  if (isPdf(record.FilePath[0].DisPlayName)) {
    return new Promise((resolve, reject) => {
      let blob = null;
      let xhr = new XMLHttpRequest();
      xhr.open(
        "GET",
        window.defaultconfig.fileUrl +
          "/api/FileManage/Download" +
          `?Id=${record.FilePath[0].FileId}`
      );
      xhr.responseType = "blob";
      xhr.onload = () => {
        blob = xhr.response;
        const blobob = new Blob([blob], {
          type: "application/pdf;charset=utf-8",
        });
        const href = window.URL.createObjectURL(blobob);
        pdfUrl.value = href;
        pdfSrc.value = "true";
        // window.open(href);
        // resolve(file);
      };
      xhr.onerror = (e) => {
        reject(e);
      };
      xhr.send();
    });
  }
  if (isDoc(record.FilePath[0].DisPlayName)) {
    axios
      .get(
        window.defaultconfig.fileUrl +
          "/api/FileManage/Download" +
          `?Id=${record.FilePath[0].FileId}`,
        { responseType: "arraybuffer" }
      )
      .then((res) => {
        const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        let fileReader = new FileReader();
        fileReader.readAsArrayBuffer(blob);
        fileReader.onload = () => {
          docSrc.value = fileReader.result;
        };
      });
  }
};
function isPdf(file) {
  var fileExtension = file.split(".").pop().toLowerCase();
  return fileExtension === "pdf";
}
function isDoc(file) {
  var fileExtension = file.split(".").pop().toLowerCase();
  return fileExtension === "docx";
}
const handleOk = () => {
  visible.value = false;
  docSrc.value = "";
  pdfSrc.value = "";
};
const handleCancel = () => {
  visible.value = false;
  docSrc.value = "";
  pdfSrc.value = "";
};